Feeds

Author

Apr 05 2019
Apr 05

You can find many comparisons between popular CMS systems on the internet. Whenever Drupal is mentioned in them, it is always described with words like: safe, open, regularly updated. Today I'm going to explain why it has such an opinion. I will also present evidence that the level of security claimed by the Drupal community is not just empty words.

Here are five reasons behind the Drupal's safety:

1. Open-sourceness

You'll probably say: most CMS systems are distributed using the Open Source model. Why would that be Drupal's advantage? But take a broader look at CMS ecosystems. Almost all are available under open licenses, but their modules, plug-ins and skins are also being distributed using a purely commercial model. In the case of WordPress – the sale of add-ons is quite popular, and it limits the openness of their code. 

The Drupal community has developed a completely different, centralised model. It mostly consists of free add-ons, available directly from the drupal.org website, additionally covered by an internal security programme. Such an approach somewhat complicates the creation of modules and skins, but at the same time – makes it difficult to smuggle malicious code. The centralised model also reveals its advantages in the case of discovering security flaws in Drupal itself. It was perfectly demonstrated by the recent SA-CORE-2019-003 security update, which covered not only the core, but also the popular modules.

2. Security Team

You can often hear about critical errors in Drupal. In 2018 and 2019 we had to deal with some highly critical updates, some of them were even named "Drupalgeddon". However, this is not a result of poor-quality code. It's a result of the titanic work being carried out by the community, especially its part dealing with security.

Drupal's Security Team currently consists of over 30 people from various companies and organisations from around the world. It has earned a well-deserved reputation – through efficiency and downright paranoid concentration on security issues. It is supported by volunteers – also working as part of paid "bug bounty" programmes.

3. Organisations' support

Based on the example of WordPress – security does not go hand in hand with reach. Though the way which a given CMS is being used is very important. Drupal is a system often chosen by large corporations and government agencies (some of them can be found on this list https://groups.drupal.org/government-sites). Even such giants as Tesla, Nokia, Harvard University, London and Los Angeles, as well as NASA have trusted him. Each of these organisations takes good care of the security measures on their websites and conducts innumerable internal audits. The vulnerabilities found are usually passed to the previously mentioned Security Team.

The support of big players is very important and necessary – thanks to this, an open-source project becomes a common good, the development of which will benefit everyone interested. As a curiosity, I would like to mention that at the beginning of 2019 the European Commission announced the EU FOSSA 2 (The European Commission Free and Open Source Software Audit) programme – the second largest beneficiary of which is actually Drupal. As part of the programme, the people tracking errors will receive a monetary reward, the amount of which depends on the significance of the reported vulnerability. There's € 89 000 in the pot.

4. Composer and the components of Symfony

Since version 8, Drupal is integrated with Symfony components. It's a huge leap forward, towards code standardisation. The use of proven modules, such as EventDispatcher, HttpFoundation/HttpKernel and Routing, relieves developers of the need to maintain their own solutions. At the same time, the Symfony community is gaining new developers and new sponsors. Thanks to this, the level of security is constantly rising, because the basic libraries are getting more and more "tight".

Symfony is not only a collection of libraries, it is also equipped with Composer – an excellent package manager created based on the npm model. It was already possible to use it with Drupal 7, but in version 8 it became a downright obligatory addition, without which it is hard to even imagine the ongoing maintenance of pages. It can deal with complex dependencies, downloading libraries other than PHP, patching and running installation scripts. Today, when the Composer's operation is very well-developed, it's safe to say that it's a milestone in updating the Drupal code.

5. Security mechanisms

I've already written about many organisational, money and design factors. I didn't, however, specifically mention what mechanisms protect a webmaster from an attack on his site. Here are some of them:

  • Users' passwords are stored in a hashed form, using salt and multiplicative hash function. This makes brute force attacks more difficult to carry out.
  • The site configuration can be saved to .yml files and compared to its previous version. What's more, you can save it in the code repository using the Features module. It's an excellent solution that greatly limits the possibility of unnoticed database infection.
  • Advanced permission management allows you to define user roles and assign them activities that they can perform on the site. The creators of Drupal put a lot of emphasis on this issue, and today it results in a high degree of security.
  • The error reporting system records every security breach, including missing .htaccess files in sensitive directories.
  • The update system allows for downloading and installing the latest versions of modules from the admin panel. It's very convenient on shared hostings, that do not always have the ability to use Composer.
  • The Twig language used to create templates has advanced mechanisms used to defend against XSS and CSRF attacks.
  • The extensive cache allows you to effectively defend against DoS attacks.
  • It is possible to fully encrypt the database.

It is worth adding that Drupal complies with the OWASP (Open Web Application Security Project) standard, defining the basic security principles that a modern web project must meet.

Apr 05 2019
Apr 05

You can find many comparisons between popular CMS systems on the internet. Whenever Drupal is mentioned in them, it is always described with words like: safe, open, regularly updated. Today I'm going to explain why it has such an opinion. I will also present evidence that the level of security claimed by the Drupal community is not just empty words.

Here are five reasons behind the Drupal's safety:

1. Open-sourceness

You'll probably say: most CMS systems are distributed using the Open Source model. Why would that be Drupal's advantage? But take a broader look at CMS ecosystems. Almost all are available under open licenses, but their modules, plug-ins and skins are also being distributed using a purely commercial model. In the case of WordPress – the sale of add-ons is quite popular, and it limits the openness of their code. 

The Drupal community has developed a completely different, centralised model. It mostly consists of free add-ons, available directly from the drupal.org website, additionally covered by an internal security programme. Such an approach somewhat complicates the creation of modules and skins, but at the same time – makes it difficult to smuggle malicious code. The centralised model also reveals its advantages in the case of discovering security flaws in Drupal itself. It was perfectly demonstrated by the recent SA-CORE-2019-003 security update, which covered not only the core, but also the popular modules.

2. Security Team

You can often hear about critical errors in Drupal. In 2018 and 2019 we had to deal with some highly critical updates, some of them were even named "Drupalgeddon". However, this is not a result of poor-quality code. It's a result of the titanic work being carried out by the community, especially its part dealing with security.

Drupal's Security Team currently consists of over 30 people from various companies and organisations from around the world. It has earned a well-deserved reputation – through efficiency and downright paranoid concentration on security issues. It is supported by volunteers – also working as part of paid "bug bounty" programmes.

3. Organisations' support

Based on the example of WordPress – security does not go hand in hand with reach. Though the way which a given CMS is being used is very important. Drupal is a system often chosen by large corporations and government agencies (some of them can be found on this list https://groups.drupal.org/government-sites). Even such giants as Tesla, Nokia, Harvard University, London and Los Angeles, as well as NASA have trusted him. Each of these organisations takes good care of the security measures on their websites and conducts innumerable internal audits. The vulnerabilities found are usually passed to the previously mentioned Security Team.

The support of big players is very important and necessary – thanks to this, an open-source project becomes a common good, the development of which will benefit everyone interested. As a curiosity, I would like to mention that at the beginning of 2019 the European Commission announced the EU FOSSA 2 (The European Commission Free and Open Source Software Audit) programme – the second largest beneficiary of which is actually Drupal. As part of the programme, the people tracking errors will receive a monetary reward, the amount of which depends on the significance of the reported vulnerability. There's € 89 000 in the pot.

4. Composer and the components of Symfony

Since version 8, Drupal is integrated with Symfony components. It's a huge leap forward, towards code standardisation. The use of proven modules, such as EventDispatcher, HttpFoundation/HttpKernel and Routing, relieves developers of the need to maintain their own solutions. At the same time, the Symfony community is gaining new developers and new sponsors. Thanks to this, the level of security is constantly rising, because the basic libraries are getting more and more "tight".

Symfony is not only a collection of libraries, it is also equipped with Composer – an excellent package manager created based on the npm model. It was already possible to use it with Drupal 7, but in version 8 it became a downright obligatory addition, without which it is hard to even imagine the ongoing maintenance of pages. It can deal with complex dependencies, downloading libraries other than PHP, patching and running installation scripts. Today, when the Composer's operation is very well-developed, it's safe to say that it's a milestone in updating the Drupal code.

5. Security mechanisms

I've already written about many organisational, money and design factors. I didn't, however, specifically mention what mechanisms protect a webmaster from an attack on his site. Here are some of them:

  • Users' passwords are stored in a hashed form, using salt and multiplicative hash function. This makes brute force attacks more difficult to carry out.
  • The site configuration can be saved to .yml files and compared to its previous version. What's more, you can save it in the code repository using the Features module. It's an excellent solution that greatly limits the possibility of unnoticed database infection.
  • Advanced permission management allows you to define user roles and assign them activities that they can perform on the site. The creators of Drupal put a lot of emphasis on this issue, and today it results in a high degree of security.
  • The error reporting system records every security breach, including missing .htaccess files in sensitive directories.
  • The update system allows for downloading and installing the latest versions of modules from the admin panel. It's very convenient on shared hostings, that do not always have the ability to use Composer.
  • The Twig language used to create templates has advanced mechanisms used to defend against XSS and CSRF attacks.
  • The extensive cache allows you to effectively defend against DoS attacks.
  • It is possible to fully encrypt the database.

It is worth adding that Drupal complies with the OWASP (Open Web Application Security Project) standard, defining the basic security principles that a modern web project must meet.

Mar 15 2019
Mar 15

As always at this time of the year, we set our course on DrupalCamp London 2019. DrupalCamp London is the event most awaited by us. This year our team was somewhat bigger. Grzesiek and Maciek were joined by Jaro. As always, we had great expectations and thirst for knowledge – and as always, we were fully satisfied.

Wykład Macka na DrupalCamp London 2019

High level of DrupalCamp London

The conference began with the inaugural presentation of a valued Google Chrome programmer, Rowan Merewood. Due to this, the participants gained a solid amount of knowledge regarding user experience and website optimisation at the start of the conference already. The level of successive lectures was rising higher and higher – a trend maintained to the very end.

Session Jaro DCL 2019

What's more, we are incredibly proud and satisfied with our own presentations. There were as many as six lectures delivered by Droptica this year! But more about it below:)

6 Droptica lectures

After the last DrupalCamp London 2018, we became convinced that one should never give up. Where did this come from? Last year we have failed to get to deliver even one lecture during the conference. We drew conclusions and moved forward. The objective? Gaining a chance to present our – quite considerable – knowledge during DrupalCamp 2019.

Grzesiek session DrupalCamp London 2019

We did it! In the end, DrupalCamp London has accepted as many as six of the presentations proposed by Droptica. We are bursting with pride! The conclusion? Obstinacy,company development, constant enhancement of knowledge and better preparation yielded better results then we have ever expected. As always, every small or big success gives us even more energy and motivation.

Jaro DrupalCamp London 2019

Below are the topics that we presented during the conference.

1. Maciej Łukiański:

  • Droopler distribution - How can you save even 100 man-days during development of a new website with Drupal.
  • Continuous integration in a Drupal project (docker, ansible, jenkins, …).

2. Grzegorz Bartman:

  • Workflow in distributed Drupal agency.
  • Scrum everywhere - how we implemented Scrum not only in software development projects.

3. Jarosław Bartman:

  • Drupal 8 SEO.
  • How to make Drupal editor-friendly.

Maciek session DrupalCamp London 2019

We are particularly proud of the distinction given to Jaro's presentation about Drupal 8 SEO during the conference's summary carried out by Richard Dewick from Drupal Centric. You can read more about it here.

DrupalCamp London 2019 with Droptica until the next year

The conference is over. The emotions slowly subside. Droptica would like to thank DrupalCamp London for a great event. The sponsors – for bringing the event to life, and
the organisers – for the effort put into its preparation. We are glad that during the conference we had a chance to meet many Drupal-buddies and make many new relationships.

Gadgets DrupalCamp London 2019

DrupalCamp London 2019 is getting better year by year. It makes us happy, because – as the proverb goes – the appetite comes with eating. We start the countdown to the next conference while keeping the practical and impressive conference gadgets with us for the time being. See you at the next DrupalCamp London!
 

Feb 27 2019
Feb 27

DrupalCamp London 2019 is approaching fast. Are you ready for another great time with Drupal? This year, 42 sessions on Drupal and related topics are scheduled. We hope, that with our help, you will choose the most promising lectures. Below are a few sessions you should definitely visit. We've picked topics both for experienced coders and beginners, as well as something for business owners, editors, marketers and others. 

1. Visual regression testing  

https://drupalcamp.london/session/visual-regression-testing-patterns

This talk will cover:

  • BackstopJS for visual regression testing on Pattern Lab patterns on a Drupal 8 theme. 
  • How to set up regression testing for each pattern and for the entire pattern library and the problems you could run into when setting up regression testing for patterns. 
  • The benefits of using this approach.

To take a part in this session, it’s best to have basic knowledge of how the integration of Drupal and Pattern Lab works. 

2. No Monkey Business Static Progressive Web Apps

https://drupalcamp.london/session/no-monkey-business-static-progressive-web-apps

This talk will cover:

  • An overview of the architecture used to deliver ii.co.uk.
  • How the GatsbyJS was used to generate static content from Drupal and other dynamic sources.
  • How these pages were further hydrated with React for dynamic content after the initial page load.
  • The custom cache handling implemented to keep content build pipelines.
  • Division of the responsibilities for content generation between GatsbyJS and Drupal.
  • Resolving the real-time preview issue without waiting for Gatsby's upcoming hosted paid preview service.

3. Layouts in Drupal: past, present and future

https://drupalcamp.london/session/layouts-drupal-past-present-and-future

This talk will cover:

  • The history of building layouts in Drupal. 
  • Using Node reference (CCK), Nodequeue and custom template to build newspaper and magazine style layouts in Drupal 5. 
  • Having a look at "page builders" like Panels, Context and Block Visibility Groups. 
  • Dividing into CSS Grid layouts and using plugins like Masonry and GridStack for more advanced grid style layouts. 
  • Alternative approaches like Paragraphs, ECK/IEF and Bricks to create custom layouts. 
  • The pros and cons of these layout approaches and if and why they are now outdated.
  • New Layout Builder and some possible new approaches for building layouts in Drupal.

4. Creating an enterprise level editorial experience for Drupal 8 using React

https://drupalcamp.london/session/creating-enterprise-level-editorial-experience-drupal-8-using-react

This talk will cover:

  • Recent project results where a decoupled application with React was created, allowing the edition of content directly in the frontend. Using the possibilities of React to the fullest. 
  • Sharing an editorial experience with 'in-place' editing, 'context-sensitive' editing, 'drag-n-drop' content placement and creation, and much more.
  • Presentation of the application and vision of what an enterprise level editorial experience should look like.
  • What to expect when going fully decoupled with editorial experience and how this approach fits into the development of Drupal.

5. Migrate to Drupal

https://drupalcamp.london/session/migrate-drupal

The talk will cover:

  • Migrations in Drupal 7 and Drupal 8
  • Effective communication to project stakeholders
  • Writing and running efficient migrations

To take a part in this session, it’s best to have basic PHP coding skills and understanding of Drupal site building.

6. Droopler distribution - How can you save even 100 man-days during the development of a new website with Drupal

https://drupalcamp.london/session/droopler-distribution-how-can-you-save-even-100-man-days-during-development-new-website

Maciej Lukianski will show you that you don't have to possess a budget of over ten thousand dollars if you need Drupal 8.

This talk will cover:

  • Droopler modules.
  • What paragraphs Droopler can offer to build your new page fast.
  • How simple it is to build a new landing page with Droopler in a live demo.
  • What ideas we have for the future functionalities of Droopler.

7. Drupal 8 SEO

https://drupalcamp.london/session/drupal-8-seo

This talk will cover:

  • Drupal modules, Google tools and external tools and how to use them to prepare an SEO strategy.
  • How to plan an SEO strategy for your website and how to compare your website with the competition.

8. Out of the Box Initiative Update

https://drupalcamp.london/session/out-box-initiative-update

This talk will cover:

  • The project in the past and present state of the initiative.
  • Targets for inclusion in Drupal 8.7.0
  • Ways to contribute to the project.
  • Plans for the more distant future.

9. Scrum everywhere - how we implemented Scrum not only in software development projects

https://drupalcamp.london/session/scrum-everywhere-how-we-implemented-scrum-not-only-software-development-projects

This talk will cover:

  • Using Scrum in the marketing team.
  • Using Scrum in QA team to improve software testing in the whole company.
  • Using Scrum for company management.
  • Using Scrum for the training of junior developers.

10. Accessibility in UX Design: How we redesigned The University of West London’s website for everyone

https://drupalcamp.london/session/accessibility-ux-design-how-we-redesigned-university-west-londons-website-everyone

This talk will cover:

  • Importance of accessibility in design, showcasing examples from industry giants such as Microsoft.
  • Highlights of accessible design.

11. How to start contributing to Drupal without code

https://drupalcamp.london/session/how-start-contributing-drupal-without-code

This talk will cover:

  • Non-code contributions and impactful ways to get involved in the Drupal project.
  • How to get started.

Summary

The talks presented by us are just a small part of what you will learn during DrupalCamp London 2019. Undoubtedly, the selection of the most important presentations out of 42 proposals is a real challenge. Perhaps the above list will help you choose. Certainly, the level of the conference will be as always deliberately high. Therefore, surely everyone will leave London with a huge dose of knowledge of Drupal innovations.

Feb 27 2019
Feb 27

DrupalCamp London 2019 is approaching fast. Are you ready for another great time with Drupal? This year, 42 sessions on Drupal and related topics are scheduled. We hope, that with our help, you will choose the most promising lectures. Below are a few sessions you should definitely visit. We've picked topics both for experienced coders and beginners, as well as something for business owners, editors, marketers and others. 

1. Visual regression testing  

https://drupalcamp.london/session/visual-regression-testing-patterns

This talk will cover:

  • BackstopJS for visual regression testing on Pattern Lab patterns on a Drupal 8 theme. 
  • How to set up regression testing for each pattern and for the entire pattern library and the problems you could run into when setting up regression testing for patterns. 
  • The benefits of using this approach.

To take a part in this session, it’s best to have basic knowledge of how the integration of Drupal and Pattern Lab works. 

2. No Monkey Business Static Progressive Web Apps

https://drupalcamp.london/session/no-monkey-business-static-progressive-web-apps

This talk will cover:

  • An overview of the architecture used to deliver ii.co.uk.
  • How the GatsbyJS was used to generate static content from Drupal and other dynamic sources.
  • How these pages were further hydrated with React for dynamic content after the initial page load.
  • The custom cache handling implemented to keep content build pipelines.
  • Division of the responsibilities for content generation between GatsbyJS and Drupal.
  • Resolving the real-time preview issue without waiting for Gatsby's upcoming hosted paid preview service.

3. Layouts in Drupal: past, present and future

https://drupalcamp.london/session/layouts-drupal-past-present-and-future

This talk will cover:

  • The history of building layouts in Drupal. 
  • Using Node reference (CCK), Nodequeue and custom template to build newspaper and magazine style layouts in Drupal 5. 
  • Having a look at "page builders" like Panels, Context and Block Visibility Groups. 
  • Dividing into CSS Grid layouts and using plugins like Masonry and GridStack for more advanced grid style layouts. 
  • Alternative approaches like Paragraphs, ECK/IEF and Bricks to create custom layouts. 
  • The pros and cons of these layout approaches and if and why they are now outdated.
  • New Layout Builder and some possible new approaches for building layouts in Drupal.

4. Creating an enterprise level editorial experience for Drupal 8 using React

https://drupalcamp.london/session/creating-enterprise-level-editorial-experience-drupal-8-using-react

This talk will cover:

  • Recent project results where a decoupled application with React was created, allowing the edition of content directly in the frontend. Using the possibilities of React to the fullest. 
  • Sharing an editorial experience with 'in-place' editing, 'context-sensitive' editing, 'drag-n-drop' content placement and creation, and much more.
  • Presentation of the application and vision of what an enterprise level editorial experience should look like.
  • What to expect when going fully decoupled with editorial experience and how this approach fits into the development of Drupal.

5. Migrate to Drupal

https://drupalcamp.london/session/migrate-drupal

The talk will cover:

  • Migrations in Drupal 7 and Drupal 8
  • Effective communication to project stakeholders
  • Writing and running efficient migrations

To take a part in this session, it’s best to have basic PHP coding skills and understanding of Drupal site building.

6. Droopler distribution - How can you save even 100 man-days during the development of a new website with Drupal

https://drupalcamp.london/session/droopler-distribution-how-can-you-save-even-100-man-days-during-development-new-website

Maciej Lukianski will show you that you don't have to possess a budget of over ten thousand dollars if you need Drupal 8.

This talk will cover:

  • Droopler modules.
  • What paragraphs Droopler can offer to build your new page fast.
  • How simple it is to build a new landing page with Droopler in a live demo.
  • What ideas we have for the future functionalities of Droopler.

7. Drupal 8 SEO

https://drupalcamp.london/session/drupal-8-seo

This talk will cover:

  • Drupal modules, Google tools and external tools and how to use them to prepare an SEO strategy.
  • How to plan an SEO strategy for your website and how to compare your website with the competition.

8. Out of the Box Initiative Update

https://drupalcamp.london/session/out-box-initiative-update

This talk will cover:

  • The project in the past and present state of the initiative.
  • Targets for inclusion in Drupal 8.7.0
  • Ways to contribute to the project.
  • Plans for the more distant future.

9. Scrum everywhere - how we implemented Scrum not only in software development projects

https://drupalcamp.london/session/scrum-everywhere-how-we-implemented-scrum-not-only-software-development-projects

This talk will cover:

  • Using Scrum in the marketing team.
  • Using Scrum in QA team to improve software testing in the whole company.
  • Using Scrum for company management.
  • Using Scrum for the training of junior developers.

10. Accessibility in UX Design: How we redesigned The University of West London’s website for everyone

https://drupalcamp.london/session/accessibility-ux-design-how-we-redesigned-university-west-londons-website-everyone

This talk will cover:

  • Importance of accessibility in design, showcasing examples from industry giants such as Microsoft.
  • Highlights of accessible design.

11. How to start contributing to Drupal without code

https://drupalcamp.london/session/how-start-contributing-drupal-without-code

This talk will cover:

  • Non-code contributions and impactful ways to get involved in the Drupal project.
  • How to get started.

Summary

The talks presented by us are just a small part of what you will learn during DrupalCamp London 2019. Undoubtedly, the selection of the most important presentations out of 42 proposals is a real challenge. Perhaps the above list will help you choose. Certainly, the level of the conference will be as always deliberately high. Therefore, surely everyone will leave London with a huge dose of knowledge of Drupal innovations.

Jan 11 2019
Jan 11

Automate actions on your Drupal-based website. This will enable it to run even more independently from your input.

Automated mailing, publishing new content at a specified time and redirects after meeting certain conditions are only some of the functionalities featured in the Rules module.

Rules is a tool that enables you to define automatic, conditionally executed actions, triggered by various types of events.

What are some examples of such automated actions? For example:

  • redirecting the user after logging in;
  • sending an e-mail after adding content;
  • publishing content at a specific time.

At the foundation of the module lies the Event – Condition – Action rule, with one caveat – the CONDITION does not have to be a part of this scheme.
An example scheme could be as follows:

  1. A user adds an entry – that’s the event.
  2. The type of the added entry is “Article” – that’s the condition.
  3. Notify the admin about somebody adding an entry via e-mail – that’s the action.

Installing and setting up the Rules module

Currently (January 2019), the module is still available in alpha4 version only, which means that some of its functionalities and features might not work properly, there might also still be some errors and bugs.
For the purposes of this article, we used the DEV version of the module.

The below example works and was tested on the configuration outlined below:
Drupal : 8.6.5
Rules : 8.x-3.x-dev
Typed Data : 8.x-1.0-alpha2

Download the modules and unpack them in the /modules/contrib directory.
Rules – https://www.drupal.org/project/rules
Typed Data – https://www.drupal.org/project/typed_data

If you are going to create rules with user roles in the conditions, for example, if you want to redirect users with an “administrator” role who log in to a specific site, you will need to add a patch: https://www.drupal.org/files/issues/2816157-10.patch. It will probably not be needed in the future, but as it stands, it is still required for the user role condition to work properly.

How to apply patches? – https://www.drupal.org/patch/apply.

Creating and testing your rules

We are now going to show you how to add a new rule, step by step: Redirecting to the /admin/people page after a user with the administrator role logs in to the website.

Add a new rule - /admin/confg/workflow/rules.
Add new rule

Fill in the fields:

  • Name your rule using the label field.
  • From the drop-down menu, select the event that will trigger your rule. In our case it is going to be “User has logged in”.

Add a condition.
Select the appropriate value, in our case, it is going to be "User has role(s)”.

Select the right condition

Now, you are going to deal with the hardest part of creating a rule, namely selecting the appropriate objects that the condition will work on. You have to be really careful here, because despite this field being validated, sometimes you might set erroneous values that will cause problems down the road.
In the USER section, switch the field from the automatic filling mode to the selection mode. Switch to the data selection.

This condition concerns users, since it is their role that you have to check, so you need to type “account” in the field.

In the ROLES section, put in the roles that will fulfil the condition. You need to put in the machine name. You can view it at /admin/people/roles page by editing a selected role. In our case, it is going to be “administrator”. You can add more roles, just keep in mind to add just one role per line.

In the MATCH ROLES section, if you have selected more than one role, you can set whether the user must have each of these roles (AND) or any of them (OR).

In the NEGATE section, you can select whether this condition should be met when the above settings are NOT MET – in this case, the action will be executed when each user logs in, except for those who have an administrator role.

Rules module conditions

Add an action.

+Add action button of module shown

Select Page redirect from the System section.

"Page redirect"action selected

Enter the address (internal or external) to which the user should be redirected after logging in.

redirection address (internal)

Save and test the rule.

In order to ensure that the rule works, clear Drupal’s cache.

Now log in and check if the redirection is working.

My redirection for the admin role does not work. What do I do?!

PHP throws an error:

  • make sure you have applied the patch mentioned above;
  • make sure that you used the “account” object in the USER section of the rule condition.

Redirection does not work after logging in:

  • make sure that the rule is saved correctly;
  • clear Drupal’s cache;
  • make sure that the role name in the condition is correct.

Discover the many possibilities of the Rules module.

The Rules module is a really powerful tool which enables you to build complex rules that will automate your website.

If you have an idea for using this tool in your project, but you need help, do not hesitate to contact us.

Jan 11 2019
Jan 11

Automate actions on your Drupal-based website. This will enable it to run even more independently from your input.

Automated mailing, publishing new content at a specified time and redirects after meeting certain conditions are only some of the functionalities featured in the Rules module.

Rules is a tool that enables you to define automatic, conditionally executed actions, triggered by various types of events.

What are some examples of such automated actions? For example:

  • redirecting the user after logging in;
  • sending an e-mail after adding content;
  • publishing content at a specific time.

At the foundation of the module lies the Event – Condition – Action rule, with one caveat – the CONDITION does not have to be a part of this scheme.
An example scheme could be as follows:

  1. A user adds an entry – that’s the event.
  2. The type of the added entry is “Article” – that’s the condition.
  3. Notify the admin about somebody adding an entry via e-mail – that’s the action.

Installing and setting up the Rules module

Currently (January 2019), the module is still available in alpha4 version only, which means that some of its functionalities and features might not work properly, there might also still be some errors and bugs.
For the purposes of this article, we used the DEV version of the module.

The below example works and was tested on the configuration outlined below:
Drupal : 8.6.5
Rules : 8.x-3.x-dev
Typed Data : 8.x-1.0-alpha2

Download the modules and unpack them in the /modules/contrib directory.
Rules – https://www.drupal.org/project/rules
Typed Data – https://www.drupal.org/project/typed_data

If you are going to create rules with user roles in the conditions, for example, if you want to redirect users with an “administrator” role who log in to a specific site, you will need to add a patch: https://www.drupal.org/files/issues/2816157-10.patch. It will probably not be needed in the future, but as it stands, it is still required for the user role condition to work properly.

How to apply patches? – https://www.drupal.org/patch/apply.

Creating and testing your rules

We are now going to show you how to add a new rule, step by step: Redirecting to the /admin/people page after a user with the administrator role logs in to the website.

Add a new rule - /admin/confg/workflow/rules.
Add new rule

Fill in the fields:

  • Name your rule using the label field.
  • From the drop-down menu, select the event that will trigger your rule. In our case it is going to be “User has logged in”.

Add a condition.
Select the appropriate value, in our case, it is going to be "User has role(s)”.

Select the right condition

Now, you are going to deal with the hardest part of creating a rule, namely selecting the appropriate objects that the condition will work on. You have to be really careful here, because despite this field being validated, sometimes you might set erroneous values that will cause problems down the road.
In the USER section, switch the field from the automatic filling mode to the selection mode. Switch to the data selection.

This condition concerns users, since it is their role that you have to check, so you need to type “account” in the field.

In the ROLES section, put in the roles that will fulfil the condition. You need to put in the machine name. You can view it at /admin/people/roles page by editing a selected role. In our case, it is going to be “administrator”. You can add more roles, just keep in mind to add just one role per line.

In the MATCH ROLES section, if you have selected more than one role, you can set whether the user must have each of these roles (AND) or any of them (OR).

In the NEGATE section, you can select whether this condition should be met when the above settings are NOT MET – in this case, the action will be executed when each user logs in, except for those who have an administrator role.

Rules module conditions

Add an action.

+Add action button of module shown

Select Page redirect from the System section.

"Page redirect"action selected

Enter the address (internal or external) to which the user should be redirected after logging in.

redirection address (internal)

Save and test the rule.

In order to ensure that the rule works, clear Drupal’s cache.

Now log in and check if the redirection is working.

My redirection for the admin role does not work. What do I do?!

PHP throws an error:

  • make sure you have applied the patch mentioned above;
  • make sure that you used the “account” object in the USER section of the rule condition.

Redirection does not work after logging in:

  • make sure that the rule is saved correctly;
  • clear Drupal’s cache;
  • make sure that the role name in the condition is correct.

Discover the many possibilities of the Rules module.

The Rules module is a really powerful tool which enables you to build complex rules that will automate your website.

If you have an idea for using this tool in your project, but you need help, do not hesitate to contact us.

Jan 03 2019
Jan 03

At Droptica, we designed, made and implemented a new design of an online store for mobile devices for one of the oldest publishers in Poland. We used Drupal 7 Commerce and did some search engine optimisation. The results? Increased sales.

The mobile view of redesigned page.

Publishing house

Three years ago we started cooperating with Wydawnictwo WAM Publishing House, one of the oldest Polish Catholic publishers. In addition to books on religious topics, they also publish scientific and popular science publications, with a total of about 150 titles a year. Their products include prayer books, catechisms, academic dissertations, literature, biographies, young adult books and cookbooks, including the famous recipes of Sister Anastasia.

“The most admirable work of our time” said Pope Pius XI about the "Apostleship of Prayer,” which was the source of the Krakow-based Wydawnictwo WAM Publishing House. It was founded in 1872 by the Jesuits. In practice, this means that WAM celebrated its 145th anniversary in 2017.

What is more, the publishing house received many awards and distinctions, including the Magellan Prize, 2014 Feniks Award and many more.
The publishing house also runs an online store and Deon.pl – social networking and news website.

The start of cooperation

We started our cooperation by building modules to improve purchasing on their website. Some of the notable examples include:

  • a module allowing users to send purchased products as gifts;
  • pick-up point selection;
  • integrating Drupal Commerce with Freshmail, which allowed the publishing house to target newsletters and send information about new products via e-mail.

Mobile version

A mobile view of another subpage.

Our task was to modernise the Drupal Commerce store mentioned above. It was nice and pleasant on the desktop; however mobile devices were another story. The store was designed and created a couple of years ago using Drupal 7 when mobile shopping was mostly unheard of. The times changed. The customer expects to be able to browse the goods, find out more about the products and purchase them using any mobile device.

Since the standards today are totally different than when the store was set up, the graphic design and layout had to be improved in order to make shopping from mobile devices more convenient.

There is no doubt that traffic and purchases from mobile devices are on the rise. At the same time, we should remember that even if the customer prefers to place the actual order using a computer (for example, because they might prefer to enter data using a standard keyboard), they often learn more about the offer and browse goods on a mobile phone or a tablet.

A view of menu for mobile version of the website
We had to act.

We started with the preparation of a new graphic design. Our graphic designer created a design tailored to mobile devices, which not only looks nice but also improves and facilitates interaction with the user.

We decided that not only we would change the layout, but we were also going to choose appropriate fonts, which would be better visible on mobile devices, and change the colours. The desktop look would remain unchanged.
After a few minor changes, the client accepted the new design and our developers started working on it.

A mobile view of the user account subsite.

We started by moving CSS to SASS pre-processor. Variables, mixins and a cleaner structure made working on changes in the graphic design faster and more efficient.

At the same time, our QA department started creating tests in Codeception. One of the main conditions was to leave the desktop layout unchanged, testing in Codeception was supposed to capture the current appearance and inform about possible undesirable changes in the course of later work.

After initial preparations, we started working on the layout change. Our main priority was the purchasing process – the cart page, payment method selection and delivery. Then we changed the product pages, information pages and search results.

A view of the product page for a mobile version of the service.
At the same time, we also developed new tests to make sure that changes in the code do not cause changes in other parts of the store, that would be difficult to notice otherwise.

It turned out that not only changes in SASS/CSS, but also additional JS code were required. For example, the website had a number of carousels with graphics. In order to make sure that they worked properly, we had to additionally change and expand the existing JavaScript code. We have added additional drop-down elements on subpages in smaller resolutions and we completely rebuilt the menu, together with the addition of the so-called sticky menu for mobile devices.

Before each implementation we performed automatic and manual tests, we analysed the entire purchasing process and checked the layout along the way. We checked everything in different environments and browsers. We fixed all the bugs that popped up and made sure that the layout was unified.
Throughout the process, we regularly implemented the results of our work, on average once per week.

Summary of changes

  • Improved layout for mobile devices – it is now clear, it attracts customers and makes it easier to navigate the site and make purchases.
  • Changes in the purchasing process (forms were adapted to the mobile layout) to speed up shopping and facilitate the choice of delivery and payment methods from smartphones and tablets.
  • Fixing bugs on mobile screens.
  • The website was adapted to current standards.
  • Implementing automatic testing, helping us catch bugs and saving developers' time.
  • Reduced session duration coupled with increased revenues for customers using mobile devices. This means that the customers find what they are looking for quicker than before.
  • Increase in purchases made using mobile devices by 200%.

The client was very satisfied with the new layout, but we were most satisfied with the sales growth. After a few months of measurements, it turned out that not only were more purchases made via the desktop version, but purchases made using mobile devices increased twofold in comparison to the same period in the previous year.

SEO

After completing the work on the mobile layout, we focused our efforts on SEO (search engine optimisation and positioning) in order to attract new customers, increase traffic on the website and add new information about products in search results.

We started from connecting the website to Google Search Console, a tool that allowed us to measure traffic on the website, improve performance and catch bugs. Then, we implemented changes based on the SEO audit, which included:

  • improving headlines;
  • adding a notification for editors if the optimal number of characters in the description tag is exceeded – the information in the tag is displayed as hints during searches;
  • adding a sitemap;
  • adding price and product availability to Google search results; 

Additionally, we optimised the size, proportions and quality of graphics on the website.

The size of graphics and page loading speed is important for Google Search optimisation. The faster the page loads, the greater the rank, which in turn increases the probability of ending up on a high position in search results.

Smaller graphics result in faster page loading times. A faster connection enables serving more customers. Fast page loading is also important for customers using smartphones and tablets, especially when their connection is weak and slow. Thanks to that, more people can conveniently browse the pages and shop more frequently.

Results of SEO work

  • Changes resulting in a higher position in search engine results.
  • Increased traffic from search engines (Google and others). Traffic increased by 50%.
  • Indexing all pages belonging to the Wydawnictwo WAM Publishing House bookstore. Google and other search engines now crawl the entire content of the pages, indexing all products and improving the publisher’s competitive edge.
  • Adding tools informing about traffic on the website.
  • The search results include additional information regarding price and availability.
  • Easier work for editors (SEO compliance information) when adding new items.

Summary

Work on the new mobile layout and SEO-related changes resulted in a number of benefits for the Wydawnictwo WAM Publishing House. The most important of these were:

  • A significant increase in website traffic and sales in the months following the implementation of the changes.
  • Increase in desktop sales by 50% compared to the previous year.
  • Increase in purchases made using mobile devices by 200% compared to the previous year.
  • 84% more new users.
  • A new layout that makes it easier for customers using smartphones and tablets to navigate and make purchases.
  • New layout and graphic design for mobile devices.
  • Quicker page loading times.
  • Reduced rejection rate.
  • Full GDPR compliance of the store.
  • Improved (simplified and sped up) purchasing process – from the shopping cart to selection of the delivery method.
  • Making sure that Google and other search engines crawl all content, products and items.
  • Additional product information in Google search results.
  • Easier work for editors working in the bookstore.
  • Compliance with current standards.
  • Introduction of automated tests that will make it easier and faster for developers to later work for the publishing house.

We continue our cooperation with Wydawnictwo WAM Publishing House. We are currently working on improving warehouse processes.

Jan 03 2019
Jan 03

At Droptica, we designed, made and implemented a new design of an online store for mobile devices for one of the oldest publishers in Poland. We used Drupal 7 Commerce and did some search engine optimisation. The results? Increased sales.

The mobile view of redesigned page.

Publishing house

Three years ago we started cooperating with Wydawnictwo WAM Publishing House, one of the oldest Polish Catholic publishers. In addition to books on religious topics, they also publish scientific and popular science publications, with a total of about 150 titles a year. Their products include prayer books, catechisms, academic dissertations, literature, biographies, young adult books and cookbooks, including the famous recipes of Sister Anastasia.

“The most admirable work of our time” said Pope Pius XI about the "Apostleship of Prayer,” which was the source of the Krakow-based Wydawnictwo WAM Publishing House. It was founded in 1872 by the Jesuits. In practice, this means that WAM celebrated its 145th anniversary in 2017.

What is more, the publishing house received many awards and distinctions, including the Magellan Prize, 2014 Feniks Award and many more.
The publishing house also runs an online store and Deon.pl – social networking and news website.

The start of cooperation

We started our cooperation by building modules to improve purchasing on their website. Some of the notable examples include:

  • a module allowing users to send purchased products as gifts;
  • pick-up point selection;
  • integrating Drupal Commerce with Freshmail, which allowed the publishing house to target newsletters and send information about new products via e-mail.

Mobile version

A mobile view of another subpage.

Our task was to modernise the Drupal Commerce store mentioned above. It was nice and pleasant on the desktop; however mobile devices were another story. The store was designed and created a couple of years ago using Drupal 7 when mobile shopping was mostly unheard of. The times changed. The customer expects to be able to browse the goods, find out more about the products and purchase them using any mobile device.

Since the standards today are totally different than when the store was set up, the graphic design and layout had to be improved in order to make shopping from mobile devices more convenient.

There is no doubt that traffic and purchases from mobile devices are on the rise. At the same time, we should remember that even if the customer prefers to place the actual order using a computer (for example, because they might prefer to enter data using a standard keyboard), they often learn more about the offer and browse goods on a mobile phone or a tablet.

A view of menu for mobile version of the website
We had to act.

We started with the preparation of a new graphic design. Our graphic designer created a design tailored to mobile devices, which not only looks nice but also improves and facilitates interaction with the user.

We decided that not only we would change the layout, but we were also going to choose appropriate fonts, which would be better visible on mobile devices, and change the colours. The desktop look would remain unchanged.
After a few minor changes, the client accepted the new design and our developers started working on it.

A mobile view of the user account subsite.

We started by moving CSS to SASS pre-processor. Variables, mixins and a cleaner structure made working on changes in the graphic design faster and more efficient.

At the same time, our QA department started creating tests in Codeception. One of the main conditions was to leave the desktop layout unchanged, testing in Codeception was supposed to capture the current appearance and inform about possible undesirable changes in the course of later work.

After initial preparations, we started working on the layout change. Our main priority was the purchasing process – the cart page, payment method selection and delivery. Then we changed the product pages, information pages and search results.

A view of the product page for a mobile version of the service.
At the same time, we also developed new tests to make sure that changes in the code do not cause changes in other parts of the store, that would be difficult to notice otherwise.

It turned out that not only changes in SASS/CSS, but also additional JS code were required. For example, the website had a number of carousels with graphics. In order to make sure that they worked properly, we had to additionally change and expand the existing JavaScript code. We have added additional drop-down elements on subpages in smaller resolutions and we completely rebuilt the menu, together with the addition of the so-called sticky menu for mobile devices.

Before each implementation we performed automatic and manual tests, we analysed the entire purchasing process and checked the layout along the way. We checked everything in different environments and browsers. We fixed all the bugs that popped up and made sure that the layout was unified.
Throughout the process, we regularly implemented the results of our work, on average once per week.

Summary of changes

  • Improved layout for mobile devices – it is now clear, it attracts customers and makes it easier to navigate the site and make purchases.
  • Changes in the purchasing process (forms were adapted to the mobile layout) to speed up shopping and facilitate the choice of delivery and payment methods from smartphones and tablets.
  • Fixing bugs on mobile screens.
  • The website was adapted to current standards.
  • Implementing automatic testing, helping us catch bugs and saving developers' time.
  • Reduced session duration coupled with increased revenues for customers using mobile devices. This means that the customers find what they are looking for quicker than before.
  • Increase in purchases made using mobile devices by 200%.

The client was very satisfied with the new layout, but we were most satisfied with the sales growth. After a few months of measurements, it turned out that not only were more purchases made via the desktop version, but purchases made using mobile devices increased twofold in comparison to the same period in the previous year.

SEO

After completing the work on the mobile layout, we focused our efforts on SEO (search engine optimisation and positioning) in order to attract new customers, increase traffic on the website and add new information about products in search results.

We started from connecting the website to Google Search Console, a tool that allowed us to measure traffic on the website, improve performance and catch bugs. Then, we implemented changes based on the SEO audit, which included:

  • improving headlines;
  • adding a notification for editors if the optimal number of characters in the description tag is exceeded – the information in the tag is displayed as hints during searches;
  • adding a sitemap;
  • adding price and product availability to Google search results; 

Additionally, we optimised the size, proportions and quality of graphics on the website.

The size of graphics and page loading speed is important for Google Search optimisation. The faster the page loads, the greater the rank, which in turn increases the probability of ending up on a high position in search results.

Smaller graphics result in faster page loading times. A faster connection enables serving more customers. Fast page loading is also important for customers using smartphones and tablets, especially when their connection is weak and slow. Thanks to that, more people can conveniently browse the pages and shop more frequently.

Results of SEO work

  • Changes resulting in a higher position in search engine results.
  • Increased traffic from search engines (Google and others). Traffic increased by 50%.
  • Indexing all pages belonging to the Wydawnictwo WAM Publishing House bookstore. Google and other search engines now crawl the entire content of the pages, indexing all products and improving the publisher’s competitive edge.
  • Adding tools informing about traffic on the website.
  • The search results include additional information regarding price and availability.
  • Easier work for editors (SEO compliance information) when adding new items.

Summary

Work on the new mobile layout and SEO-related changes resulted in a number of benefits for the Wydawnictwo WAM Publishing House. The most important of these were:

  • A significant increase in website traffic and sales in the months following the implementation of the changes.
  • Increase in desktop sales by 50% compared to the previous year.
  • Increase in purchases made using mobile devices by 200% compared to the previous year.
  • 84% more new users.
  • A new layout that makes it easier for customers using smartphones and tablets to navigate and make purchases.
  • New layout and graphic design for mobile devices.
  • Quicker page loading times.
  • Reduced rejection rate.
  • Full GDPR compliance of the store.
  • Improved (simplified and sped up) purchasing process – from the shopping cart to selection of the delivery method.
  • Making sure that Google and other search engines crawl all content, products and items.
  • Additional product information in Google search results.
  • Easier work for editors working in the bookstore.
  • Compliance with current standards.
  • Introduction of automated tests that will make it easier and faster for developers to later work for the publishing house.

We continue our cooperation with Wydawnictwo WAM Publishing House. We are currently working on improving warehouse processes.

Dec 24 2018
Dec 24

Droopler 1.4 is now available and you can download it right now! Personally, I’ve been testing the 1.4-rc version on Droptica’s websites for a number of weeks and I can honestly say that the new version is a great improvement in terms of editing work. Finally, creating long and beautiful websites in Drupal is a simple and pleasant affair.

Easier paragraph editing

The main content type in Droopler is paragraph-based. The Paragraphs module is – at least in my opinion – the best Drupal module geared towards easier content creation; however, when it comes to long and very long pages, editing content using Paragraphs becomes tedious and annoying. 

We looked for a solution for quite a while, and finally, we found the Geysir module. After installation, we had to make a couple of changes in the system in order to make this module work properly. After some customisation, we finally have a working Geysir module as part of our Droopler distribution. This is why starting with version 1.4, editing long pages will be a pleasure for all editors out there.

You can see an example of editing with Geysir module in the clip below.

[embedded content]

Products, services, listings

Another important change introduced in version 1.4 of Droopler is a product listing module. The module defines new content type used for creating products, sub-page listing products with filtering options and sub-pages for individual products. 

Droopler was developed to make making repeated functionalities easier, and this also includes listings. This usually concerns products, but this module can be also used for listing classifieds or job offers, as well as a portfolio and other use cases like these. The module has a multitude of use cases... And you get it for free with Droopler 1.4!

After installing Droopler, the module is disabled by default, so you will have to enable it via the module management panel in Drupal. 

How to start using Droopler? 

If you want to see what Droopler looks like, check out our demo: https://demo.droopler.com 
You can download the distribution as a package from Droopler | Drupal.org website – the distribution was downloaded more than 1300 times as of 2018.12.11!

You can also install Droopler using Composer and instructions available on GitHub. You can find them at droptica/droopler_project. 

The comprehensive description of the installation process can be found at our “Installing and Updating Droopler in a nutshell” page. 

I encourage you to test Droopler 1.4 – it is definitely worth checking out what the system looks like in its latest version and how easy it is to use for building websites.

Dec 20 2018
Dec 20

Soon, we will be celebrating the first anniversary of the day Droopler – our open Drupal 8 distribution – was released. It is a perfect time for some summaries and plans for the future. In this article, I’m going to show you how Droopler works and what awaits its users in the upcoming release.

Why Droopler?

Where did the idea of creating a new distribution come from? We were often dealing with the need to quickly build a simple showcase page for a product, company or an event. In doing so, we noticed that the combination of technologies that often go together, such as Bootstrap, npm/gulp, Composer, SCSS and Drupal 8, requires doing the same, repetitive actions all the time. This combination also proves to be difficult to maintain further down the line, especially when the number of pages grows with time. This led us to think about a solution to this problem. And thus the idea was born to build a distribution different than anything on the market.

What distinguishes Droopler from among other similar projects? Well, first and foremost, it turns the process of creating a website upside down. Imagine getting a ready-made website out-of-the-box, right after installing the distribution. All you need to do is add your own content. You don’t have to focus on building your layout from scratch or styling the page – instead, you can invest your time and money into adapting the existing solution. You can also change your website down the line, if your budget allows it, which is a very effective approach to web development, rarely seen in with Drupal.

As a result, we faced the task of developing a universal distribution, one that would work out-of-the-box, be easy to update and upgrade and allow users to implement radical changes to the website layout and design. In order to fulfil these requirements, we decided to go with Bootstrap 4 and took advantage of the experience gathered along the way with Bootstrap Barrio projects, while going for the best and most complete integration with SCSS. At the same time, we decided to make editing the content as simple as possible, in order to enable building it out of ready-made elements using the Paragraphs module. As a result, the 1.0 version of Droopler was a product with a well-thought-out structure, which we gladly shared with the Open Source community. Despite the fact that it had only a couple of ready-made paragraphs and a basic version of the layout, it was a solid foundation for further development.

Since then, Droptica team has been continuously working on making the distribution better and more refined, and we invested more than 1100 hours into its development. The subsequent versions gained the d_blog module for publishing blog articles, new paragraph types, new graphics options and countless fixes and patches. One of the guiding principles for the development of this project was the fact that it needed to be easy to pick up for new users, which is why we’re writing self-documenting code that is in line with standards recognised in the PHP and Drupal communities. We support our development work with Continuous Integration. In other words, we build a product that we would be happy to use ourselves. In fact... we do!

Future

The upcoming days will bring the all-new Droopler 1.4, which is slated to release soon. The new version will feature completely new functionalities, including the presentation of the product offer, editing has been made easier than ever, and we implemented an update system based on solutions implemented by the creators of Thunder. Apart from that, it will also bring fixes for many bugs reported by our users.

As far as the future is concerned, we are going to face new challenges. We are constantly gathering and reading your feedback and comments, which guide the project’s development roadmap, since that way it can be based on our own experience, as well as that gathered by other webmasters. We encourage everybody to actively participate in the life of the Droopler community by taking part in Facebook discussions and by submitting tickets at drupal.org and github.com

We are also grateful for choosing our product and we wish you many successes in promoting your product on the Internet in the coming New Year.

Oct 05 2018
Oct 05

Drupal is an open-source platform that more than a million of people across the globe find useful for their content management purposes. They choose Drupal because of its flexibility, reliability, and security. However, not all of them know how to use it properly. Find out about the mistakes that Drupal beginners often make.
Let’s dive deeper and analyze the examples of developer’s activity that could make Drupal ineffective and see what to do to get better results right away!

Bad content structure

Without the proper plan in place, your content structure can end up with a messy, incoherent experience for the site visitors. Determining a good structure from the very start increase your website performance. 

Try to minimize the number of content types, fields and tables. Too many content types can confuse content creators so you need to standardize them. For instance, you don’t need both “news” and “article” types, as these are almost the same - leave one of them. Moreover, creating new fields for every content type is a waste of resources that also comes with worse performance. Avoid making similar fields, as it brings unnecessary complexity to your site. 

This is why it’s good to design the system before you start to implement the elements. Take time to think about the structure and decide how the Drupal architecture should look like to improve website’s performance. Make it as simple as possible and use only the unnecessary elements. 

New Drupal developers also have problems with the folder structure. To be more precise, it’s about setting up wrong folder structure and putting themes and modules in the folder on a root level rather than in separate folders. This is one of the serious mistakes, as it affects the process of upgrading to the latest version and make debugging a way more difficult. You will lose a lot of time trying to fix it, so focus on creating a proper folder structure in the beginning. 

Using unnecessary Drupal modules across the site

Inexperienced developers can be amazed by a plethora of modules available which leads to installing too many of them. Even if Drupal developers don’t make a use of all of the modules at the beginning, they think that they will need it later. If you’re one of these developers… stop doing this! 
You need to realize that the more elements you have, the slower is your website, not to mention the mess you have in the code. With that being said, review all the modules you have again and get rid of ones you don’t need. Also, too many modules can decrease website security, so think about that. 

Not removing previous versions of the modules

Speaking of modules, Drupal developers often forget to remove older versions of downloaded modules. Some of them simply don’t know that even if the module is placed into a different directory, Drupal may decide to use the older version. It’s because the folders are usually on the same level. 
Sometimes, the software can switch between various module versions so, as you can guess, it can cause some problems. And we all know you don’t need such unwanted surprises.

Choosing unsupported modules in Drupal

A large number of different modules can be a challenge for a Drupal beginner, especially when there are ones that cover all the functionalities you look for. Unsupported modules can cause some problems in the long run, for instance, because of the compatibility issues or bugs that will never be fixed. 
Before downloading a new module, check when the last update was made and read the description provided by the author. Note that some projects are marked unsupported for security reasons so think twice before you decide to use one of these, as you risk data breach.

Ignoring code standards

When several people are working on the same website, it’s important to have code standards in place. Without them, you risk wasting the time trying to understand other developer’s code. Don’t make the mistake and start by creating the guideline to improve the quality of the source code and the efficiency of the team. 

Applying Drupal code standards is a good practice, even if you are a single developer working on your own project. Think about the situation when you want to expand the project that requires another developer’s involvement. With documented standards, it will be much easier to start, so… draw conclusions. 

Never make Drupal beginners mistakes again

It’s not surprising that newbies make mistakes, they simply need time to learn about all the opportunities the system gives them. Drupal is a complex tool, so there’s a huge chance to create something that doesn’t work the way we wanted, especially when we don’t have proper knowledge and experience. 

The good news is that you can always ask questions - the Drupal community exceeded a million of users that are willing to help. Someday, you can also be handy by sharing your experience. 

Oct 05 2018
Oct 05

Drupal is an open-source platform that more than a million of people across the globe find useful for their content management purposes. They choose Drupal because of its flexibility, reliability, and security. However, not all of them know how to use it properly. Find out about the mistakes that Drupal beginners often make.
Let’s dive deeper and analyze the examples of developer’s activity that could make Drupal ineffective and see what to do to get better results right away!

Bad content structure

Without the proper plan in place, your content structure can end up with a messy, incoherent experience for the site visitors. Determining a good structure from the very start increase your website performance. 

Try to minimize the number of content types, fields and tables. Too many content types can confuse content creators so you need to standardize them. For instance, you don’t need both “news” and “article” types, as these are almost the same - leave one of them. Moreover, creating new fields for every content type is a waste of resources that also comes with worse performance. Avoid making similar fields, as it brings unnecessary complexity to your site. 

This is why it’s good to design the system before you start to implement the elements. Take time to think about the structure and decide how the Drupal architecture should look like to improve website’s performance. Make it as simple as possible and use only the unnecessary elements. 

New Drupal developers also have problems with the folder structure. To be more precise, it’s about setting up wrong folder structure and putting themes and modules in the folder on a root level rather than in separate folders. This is one of the serious mistakes, as it affects the process of upgrading to the latest version and make debugging a way more difficult. You will lose a lot of time trying to fix it, so focus on creating a proper folder structure in the beginning. 

Using unnecessary Drupal modules across the site

Inexperienced developers can be amazed by a plethora of modules available which leads to installing too many of them. Even if Drupal developers don’t make a use of all of the modules at the beginning, they think that they will need it later. If you’re one of these developers… stop doing this! 
You need to realize that the more elements you have, the slower is your website, not to mention the mess you have in the code. With that being said, review all the modules you have again and get rid of ones you don’t need. Also, too many modules can decrease website security, so think about that. 

Not removing previous versions of the modules

Speaking of modules, Drupal developers often forget to remove older versions of downloaded modules. Some of them simply don’t know that even if the module is placed into a different directory, Drupal may decide to use the older version. It’s because the folders are usually on the same level. 
Sometimes, the software can switch between various module versions so, as you can guess, it can cause some problems. And we all know you don’t need such unwanted surprises.

Choosing unsupported modules in Drupal

A large number of different modules can be a challenge for a Drupal beginner, especially when there are ones that cover all the functionalities you look for. Unsupported modules can cause some problems in the long run, for instance, because of the compatibility issues or bugs that will never be fixed. 
Before downloading a new module, check when the last update was made and read the description provided by the author. Note that some projects are marked unsupported for security reasons so think twice before you decide to use one of these, as you risk data breach.

Ignoring code standards

When several people are working on the same website, it’s important to have code standards in place. Without them, you risk wasting the time trying to understand other developer’s code. Don’t make the mistake and start by creating the guideline to improve the quality of the source code and the efficiency of the team. 

Applying Drupal code standards is a good practice, even if you are a single developer working on your own project. Think about the situation when you want to expand the project that requires another developer’s involvement. With documented standards, it will be much easier to start, so… draw conclusions. 

Never make Drupal beginners mistakes again

It’s not surprising that newbies make mistakes, they simply need time to learn about all the opportunities the system gives them. Drupal is a complex tool, so there’s a huge chance to create something that doesn’t work the way we wanted, especially when we don’t have proper knowledge and experience. 

The good news is that you can always ask questions - the Drupal community exceeded a million of users that are willing to help. Someday, you can also be handy by sharing your experience. 

Sep 26 2018
Sep 26

It’s been two years since the première of Drupal 8. We already got used to the differences between versions 7 and 8, and a lot of websites were created based on D8. Many Drupal 7-based websites are applications that use Drupal Commerce – an e-commerce module for Drupal. Many of the applications were set-up with the Commerce Kickstart distribution, which was based on this add-on. What’s the way to do it with D8? For a long time, only the alpha version was available, then a beta version was released. On the 20th of September 2017, we saw the release of version 2.0. As of today, the current version is 2.9. We'll see what’s new in DC and how it works with D8. For testing purposes, we are going to use DC 2.9 and Drupal 8.5.9 with Droopler distribution.

Set-up and requirements

According to the manual, it is recommended to install Drupal using Composer; set-up requires Drupal 8.5 or newer. We did not have any issues with the installation process. To install the newest DC, we used the following command:

composer require "drupal/commerce"

DC requires several additional modules (Address, Entity, Inline Entity Form, Entity Reference Revisions, Profile, State Machine). When using Composer, you don’t have to worry about installing them manually, as they will be added automatically. After successful set-up, the list of modules will grow by 12 new entries.

List of modules with new items sorted in alphabetical order

Functionality, modules and innovations

We have launched all the modules for the purpose of testing. The Commerce icon appeared on our main menu. At first glance, you can see a number of options that were not included in the standard version for D7. This includes:

  • Store types
  • Product attributes
  • Promotions
  • Order types
  • Order item types
  • Checkout flows
  • Product variation types.

Store and Store types

It allows you to define store types your website, “online” is added by default. Adding more store types may be useful if you have a network of brick and mortar stores or branches in different countries. These stores may have a country-specific offer but use the same database of all products kept in one place. You should remember that a product may belong to one or more stores; however, an order placed by the user is always assigned to one store.

Another interesting option is the possibility of creating stores by users on your website, allowing vendors to open their online stores on your platform, as well as create and sell their own products, just like ETSY. You can find out more about that functionality from Drupal Commerce documentation.

Product attributes

Allows you to add attributes to your products. There are three display options available: Select list, Radio button and Rendered attribute. These attributes can be assigned to types and used when adding new products.

Attributes - a selectable list with three available options

Promotions

DC provides you with a sub-module that allows you to add bonuses and discounts. The discount can be set for specific products or the entire order. The discount may be either a fixed amount or a percentage, and they can be assigned to a role, a shipping address, or an e-mail address. You can also limit promotions and special offers to a maximum order value or currency. In addition, you have the option to add start and end dates, limit the number of uses and decide whether a discount can be combined with other promotions. Admittedly, this is a great convenience. Compared to other e-commerce systems, these are the things that should already be standard. In D7, it was not so obvious, and it could cause quite a headache.

A view of addingthe promotion in Drupal Commerce 2

Order types

Another new thing in DC is a new approach to orders. You can now create several order types with different shopping paths, or even showing shopping cart in a different way. This is quite an interesting solution and it will certainly be useful for more complex projects, where products require a different business approach. Each type can have its own unique fields and rendering methods.

A view of order types page

Checkout flows

As mentioned above, in addition to the order types, you can set up many different shopping paths. They may vary depending on the type of order placed. The entire order process is displayed using plug-ins. By default, you can take advantage of Multistep; however, you can add your own plug-in and use it, for example, for one of several shopping paths. This is quite an interesting approach, thanks to which you won’t have to alter the single default path. You can check out how to create your own flow plug-in here: https://docs.drupalcommerce.org/commerce2/developer-guide/checkout/create-custom-checkout-flow

Adding your own module to the list of available plugins

Order item types

One could say that this is something like “Line item” from D7 – an item that stores order data and products, you can also define your own fields for storing other information.

Commerce 8 in action

Let's see how commerce works in practice.

Adding a product

A subpage to add a product. Some options created before are available to choose

As you can see, you can use the attributes and variations of the products that you have created earlier. Let’s add a product with several options to choose from.

Product sheet

Product page
Cart

A cart
The standard cart is a block with views, which can be easily and freely configured, like in D7.

Payments

We have included the default test payments available in the module for the purpose of our tests. If you want to use a ready-made gateway, you can go with:

PayPal - https://www.drupal.org/project/commerce_paypal - beta1

Tpay - https://www.drupal.org/project/commerce_tpay - rc2

Shipments

You can take advantage of a shipping module – Commerce Shipping beta4.

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

It is integrated with the physical model, thanks to which you can use automatic conversion of sizes and scales to the final shipping cost.

A view of "adding the package type" page

As for the shipment integration, I only managed to find an Alpha3 version for FedEx.

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

In addition, DC developers used the Address module.

The address fields are supported for more than 200 countries. They include locations, regions, voivodeships, Länder and so on from most countries of the world. In addition, you can create custom “Address zones” and assign special properties such as special shipping prices, taxes, etc.

Summary

Drupal Commerce has a number of basic functions and many interesting innovations operational and working, which is, of course, a huge advantage. In addition, the developers decided to provide users with more configuration options by default, compared to the D7 version. A typical site builder might have issues with building a store for a client, due to the lack of D7 modules and the fact that the majority of them is in alpha or beta version, which means that they may be unstable. If you don't develop advanced modules for the D8, it can be a huge obstacle, otherwise, you might have to develop them yourself.

What was great about DC was the fact that we were able to configure and set the basic functions of our store in a short time without any problems. More and more modules are released, and a large number of them is already available in stable versions. That is why the combination of Drupal 8 and Drupal Commerce is a tool that gives a lot of possibilities for implementing interesting projects.

You might ask whether you should go for a proven Commerce with D7 duo or try the innovations introduced in D8.

The answer is... It depends on the project, your development resources, as well as time and budget for developing elements that are not available or do not work properly with D8. It is worth mentioning that pages based on Drupal Commerce receive SPLASH AWARD on regular basis. Since 2014 the competition names the best Drupal sites. More on this topic here: https://www.emerce.nl/wire/frmwrk-wint-tweede-prijs-drupal-splash-awards

Splash award certificate for Drupal Commerce site

However, as of now, the project looks promising and we keep our fingers crossed for the further development of Commerce. If you need more information about DC, feel free to visit https://docs.drupalcommerce.org/

We also encourage you to read other articles on our blog!

Sep 21 2018
Sep 21

What to do with an old, outdated website that you would like to keep online? The perfect solution is to archive it to pure HTML code. We will demonstrate it on the example of a drupalcamp.pl website created in Droopler, based on Drupal 8.

Why archive pages at all?

Sometimes websites have their expiration date. It may result from the life cycle of the technology used to build it or simply because the website was created for an event or some special occasion. When you organise a music festival, for example, the website is no longer up to date and necessary after it ends. When you have long forgotten websites on your server, their code may be so outdated that it will turn into a threat in the future. If, for some reason, you want to keep your websites on the Internet, you have to take into account the cost of their constant maintenance and updating.

What are the costs of an unused website?

The cost of maintenance depends to a large extent on the technology used. Let's focus on Drupal 8 since it is one of the safest CMS available on the market. Updates to D8 are published monthly, and every six months a version containing new functionalities is published. This means you need to install a fresh release of Drupal 12 times a year and test our website to see if it's still working, so you can stay on top of updates. We know from experience that this can be very time-consuming.

On the other hand, if you decide against upgrading, your website is now at risk of being attacked and poses a threat to other websites on your server. Shortcomings in the security department may lead to much higher costs than updating your code on an ongoing basis.

The question arises – how to avoid maintenance costs and keep the website online? A great compromise between sentiment and cost-effectiveness is the conversion to pure HTML code.

What are the advantages and disadvantages of pure HTML?

Deploying websites written in pure HTML is in a sense a return to the roots. In the age of advanced CMSs, hardly anyone remembers that a website can be created without the use of server-side interpreted languages, such as PHP.

Why writing pages using HTML only was forgotten?

  • Due to difficulties in updating their content.
  • Because it is not possible to reuse the code for global elements (such as header, main menu, footer).
  • Due to the static nature of HTML, which makes it difficult to create administrative pages.

So why convert an unused Drupal 8 website to pure HTML?

  • This will result in a rapid increase in the speed of operation of all subpages, including those which have been the slowest so far.
  • It will be very difficult to attack the website if you configure the server properly.
  • Updating the code will become completely unnecessary, the cost of maintenance will be practically zero.

What will be the limitations of a website converted to HTML?

  • Changes to the content will become more time-consuming. The developer will include them in a local copy and then generate the HTML version for publication on the server.
  • Dynamic elements such as forms will stop working.

How to adapt a website for archiving?

Not every website is suitable for archiving right away. First of all, you should make sure that none of the subpages contains any elements requiring PHP scripts to work:

  • Contact forms (they can be replaced with embedded Google Forms).
  • Search engines (they can be replaced with Google search on the website).
  • Views Exposed Filters.
  • AJAX in views.

It is also necessary to disable error messages sent by the server – especially when copying a website from localhost. During archiving you should use settings as similar to production as possible, including CSS/JS aggregation and lack of additional diagnostic information generated by Twig.

At the beginning of the article, we promised to describe the conversion to HTML, based on a real example. Therefore, we are going to present the method of archiving the drupalcamp.pl website, dedicated to the DrupalCamp 2018 conference organised by us. This is a cyclical event, but each subsequent year we prepare a completely new website. Once DrupalCamp has taken place, we leave this page up as a souvenir, archived to HTML at a separate address.

The website of DrupalCamp conference in Wrocław.

What preparations did drupalcamp.pl require? First of all, we removed the subpages with the forms, which were no longer needed, since the conference has already ended. We made sure that all views worked without AJAX on the programme subpages. We also carried out a quick JS audit to eliminate potential code issues when PHP is disabled.

The archiving process

We use the httrack software, which is available under the GNU GPL3 license, in order to automatically archive pages. It is available for Windows, Linux, OSX and Android. We use httrack via a Linux console. There are plenty of switches and options available in the documentation, here is our command to make a 1:1 copy of a website, while maintaining the link structure:

httrack http://example.com -O output_dir --disable-security-limits --max-rate=99999999999 -K3 -X -%P -wqQ%v --robots=0 -N "%h%p/%n.%t"
  • --disable-security-limits - disables the built-in transfer limits, this is useful when our local server is the source.
  • --max-rate - sets the maximum transmission speed.
  • -%P - tries to recognise all possible links to files on the website.
  • -K3 - does not change the links on the pages.
  • -N "%h%p/%n.%t" - does not change file names.
  • -X - on the next command, deletes files from the archived version that were deleted in the original.
  • -wqQ%v - standard mode, silent, with a list of processed files on the screen.

The resulting page image is not yet completely finished. The subpages are in files such as about-us.html, instead of about-us/index.html. A simple script will fix this problem:

#!/bin/bash
for f in $(find output_dir/example.com -name "*.html" -type f); do 
        if [[ $f = *"/index.html" ]]; then
                echo "Omitting $f"              
        else
                echo "Processing $f"
                mkdir "${f%.html}"
                mv $f "${f%.html}/index.html"
        fi
done

The copy created in this way will be indistinguishable from the original to the observer. This is important for the preservation of existing positions in Internet search engines.

Httrack’s compatibility with Drupal

Drupal 8 is not fully compatible with httrack. The main problem is the responsive images presented via the <picture> tag. Proper conversion to HTML requires providing httrack with hints for additional downloads.

The drupalcamp.pl website that we archived is based on Droopler, an in-house, free of charge distribution of Drupal 8. In version 1.3 of Droopler, we have implemented full support for httrack, which helps with identifying and downloading all graphics files used on the website.

How did we “improve” the compatibility with httrack? We used a very simple solution in the form of hooks preparing a list of files to download. Hints for the bot are placed in the <head> section of the page, as subsequent <link> elements:

<link href="https://www.droptica.com/sites/default/files/styles/responsive_image_2000/public/blog/node_52/35080887_779262195604057_3638740630118596608_o.jpg?itok=YkFsAytN" rel="droopler:c0527d:img0" />
<link href="https://www.droptica.com/sites/default/files/styles/responsive_image_1200/public/blog/node_52/35080887_779262195604057_3638740630118596608_o.jpg?itok=OEsKzsbg" rel="droopler:c0527d:img1" />

These elements are recognised by httrack and downloaded to the copy. Thanks to this, we can maintain full responsiveness of the images. The excess code is usually deleted from the console by means of a regular expression.

Conversion results

The result of conversion to HTML is very satisfactory in our case. We’ve got a folder with files of a total size of about 20 MB. As one would expect, the access time to an HTML file is a few milliseconds, meaning that it is negligible. It remains very low even under heavy loads. So far, this value on the production server has oscillated around 200ms (of course for users who weren’t logged in, with active cache). Under the load, it increased to about 700ms.

We checked the correctness of export using Screaming Frog SEO Spider software. It did not detect 404 errors, which means that the archiving was 100% successful. Also, the browser consoles do not show any JS errors.

It can be expected that in the next few days the DrupalCamp 2018 website will be finally retired and replaced by pure HTML version. In this way, we will avoid the need to update it and, therefore, we won’t incur additional costs. If there is a need to make changes to the content, we will make them on a local version, based on Drupal, and then automatically generate a new HTML page. We encourage you to take advantage of our experience!

Sep 21 2018
Sep 21

What to do with an old, outdated website that you would like to keep online? The perfect solution is to archive it to pure HTML code. We will demonstrate it on the example of a drupalcamp.pl website created in Droopler, based on Drupal 8.

Why archive pages at all?

Sometimes websites have their expiration date. It may result from the life cycle of the technology used to build it or simply because the website was created for an event or some special occasion. When you organise a music festival, for example, the website is no longer up to date and necessary after it ends. When you have long forgotten websites on your server, their code may be so outdated that it will turn into a threat in the future. If, for some reason, you want to keep your websites on the Internet, you have to take into account the cost of their constant maintenance and updating.

What are the costs of an unused website?

The cost of maintenance depends to a large extent on the technology used. Let's focus on Drupal 8 since it is one of the safest CMS available on the market. Updates to D8 are published monthly, and every six months a version containing new functionalities is published. This means you need to install a fresh release of Drupal 12 times a year and test our website to see if it's still working, so you can stay on top of updates. We know from experience that this can be very time-consuming.

On the other hand, if you decide against upgrading, your website is now at risk of being attacked and poses a threat to other websites on your server. Shortcomings in the security department may lead to much higher costs than updating your code on an ongoing basis.

The question arises – how to avoid maintenance costs and keep the website online? A great compromise between sentiment and cost-effectiveness is the conversion to pure HTML code.

What are the advantages and disadvantages of pure HTML?

Deploying websites written in pure HTML is in a sense a return to the roots. In the age of advanced CMSs, hardly anyone remembers that a website can be created without the use of server-side interpreted languages, such as PHP.

Why writing pages using HTML only was forgotten?

  • Due to difficulties in updating their content.
  • Because it is not possible to reuse the code for global elements (such as header, main menu, footer).
  • Due to the static nature of HTML, which makes it difficult to create administrative pages.

So why convert an unused Drupal 8 website to pure HTML?

  • This will result in a rapid increase in the speed of operation of all subpages, including those which have been the slowest so far.
  • It will be very difficult to attack the website if you configure the server properly.
  • Updating the code will become completely unnecessary, the cost of maintenance will be practically zero.

What will be the limitations of a website converted to HTML?

  • Changes to the content will become more time-consuming. The developer will include them in a local copy and then generate the HTML version for publication on the server.
  • Dynamic elements such as forms will stop working.

How to adapt a website for archiving?

Not every website is suitable for archiving right away. First of all, you should make sure that none of the subpages contains any elements requiring PHP scripts to work:

  • Contact forms (they can be replaced with embedded Google Forms).
  • Search engines (they can be replaced with Google search on the website).
  • Views Exposed Filters.
  • AJAX in views.

It is also necessary to disable error messages sent by the server – especially when copying a website from localhost. During archiving you should use settings as similar to production as possible, including CSS/JS aggregation and lack of additional diagnostic information generated by Twig.

At the beginning of the article, we promised to describe the conversion to HTML, based on a real example. Therefore, we are going to present the method of archiving the drupalcamp.pl website, dedicated to the DrupalCamp 2018 conference organised by us. This is a cyclical event, but each subsequent year we prepare a completely new website. Once DrupalCamp has taken place, we leave this page up as a souvenir, archived to HTML at a separate address.

The website of DrupalCamp conference in Wrocław.

What preparations did drupalcamp.pl require? First of all, we removed the subpages with the forms, which were no longer needed, since the conference has already ended. We made sure that all views worked without AJAX on the programme subpages. We also carried out a quick JS audit to eliminate potential code issues when PHP is disabled.

The archiving process

We use the httrack software, which is available under the GNU GPL3 license, in order to automatically archive pages. It is available for Windows, Linux, OSX and Android. We use httrack via a Linux console. There are plenty of switches and options available in the documentation, here is our command to make a 1:1 copy of a website, while maintaining the link structure:

httrack http://example.com -O output_dir --disable-security-limits --max-rate=99999999999 -K3 -X -%P -wqQ%v --robots=0 -N "%h%p/%n.%t"
  • --disable-security-limits - disables the built-in transfer limits, this is useful when our local server is the source.
  • --max-rate - sets the maximum transmission speed.
  • -%P - tries to recognise all possible links to files on the website.
  • -K3 - does not change the links on the pages.
  • -N "%h%p/%n.%t" - does not change file names.
  • -X - on the next command, deletes files from the archived version that were deleted in the original.
  • -wqQ%v - standard mode, silent, with a list of processed files on the screen.

The resulting page image is not yet completely finished. The subpages are in files such as about-us.html, instead of about-us/index.html. A simple script will fix this problem:

#!/bin/bash
for f in $(find output_dir/example.com -name "*.html" -type f); do 
        if [[ $f = *"/index.html" ]]; then
                echo "Omitting $f"              
        else
                echo "Processing $f"
                mkdir "${f%.html}"
                mv $f "${f%.html}/index.html"
        fi
done

The copy created in this way will be indistinguishable from the original to the observer. This is important for the preservation of existing positions in Internet search engines.

Httrack’s compatibility with Drupal

Drupal 8 is not fully compatible with httrack. The main problem is the responsive images presented via the <picture> tag. Proper conversion to HTML requires providing httrack with hints for additional downloads.

The drupalcamp.pl website that we archived is based on Droopler, an in-house, free of charge distribution of Drupal 8. In version 1.3 of Droopler, we have implemented full support for httrack, which helps with identifying and downloading all graphics files used on the website.

How did we “improve” the compatibility with httrack? We used a very simple solution in the form of hooks preparing a list of files to download. Hints for the bot are placed in the <head> section of the page, as subsequent <link> elements:

<link href="https://www.droptica.com/sites/default/files/styles/responsive_image_2000/public/blog/node_52/35080887_779262195604057_3638740630118596608_o.jpg?itok=YkFsAytN" rel="droopler:c0527d:img0" />
<link href="https://www.droptica.com/sites/default/files/styles/responsive_image_1200/public/blog/node_52/35080887_779262195604057_3638740630118596608_o.jpg?itok=OEsKzsbg" rel="droopler:c0527d:img1" />

These elements are recognised by httrack and downloaded to the copy. Thanks to this, we can maintain full responsiveness of the images. The excess code is usually deleted from the console by means of a regular expression.

Conversion results

The result of conversion to HTML is very satisfactory in our case. We’ve got a folder with files of a total size of about 20 MB. As one would expect, the access time to an HTML file is a few milliseconds, meaning that it is negligible. It remains very low even under heavy loads. So far, this value on the production server has oscillated around 200ms (of course for users who weren’t logged in, with active cache). Under the load, it increased to about 700ms.

We checked the correctness of export using Screaming Frog SEO Spider software. It did not detect 404 errors, which means that the archiving was 100% successful. Also, the browser consoles do not show any JS errors.

It can be expected that in the next few days the DrupalCamp 2018 website will be finally retired and replaced by pure HTML version. In this way, we will avoid the need to update it and, therefore, we won’t incur additional costs. If there is a need to make changes to the content, we will make them on a local version, based on Drupal, and then automatically generate a new HTML page. We encourage you to take advantage of our experience!

Sep 21 2018
Sep 21

What to do with an old, outdated website that you would like to keep online? The perfect solution is to archive it to pure HTML code. We will demonstrate it on the example of a drupalcamp.pl website created in Droopler, based on Drupal 8.

Why archive pages at all?

Sometimes websites have their expiration date. It may result from the life cycle of the technology used to build it or simply because the website was created for an event or some special occasion. When you organise a music festival, for example, the website is no longer up to date and necessary after it ends. When you have long forgotten websites on your server, their code may be so outdated that it will turn into a threat in the future. If, for some reason, you want to keep your websites on the Internet, you have to take into account the cost of their constant maintenance and updating.

What are the costs of an unused website?

The cost of maintenance depends to a large extent on the technology used. Let's focus on Drupal 8 since it is one of the safest CMS available on the market. Updates to D8 are published monthly, and every six months a version containing new functionalities is published. This means you need to install a fresh release of Drupal 12 times a year and test our website to see if it's still working, so you can stay on top of updates. We know from experience that this can be very time-consuming.

On the other hand, if you decide against upgrading, your website is now at risk of being attacked and poses a threat to other websites on your server. Shortcomings in the security department may lead to much higher costs than updating your code on an ongoing basis.

The question arises – how to avoid maintenance costs and keep the website online? A great compromise between sentiment and cost-effectiveness is the conversion to pure HTML code.

What are the advantages and disadvantages of pure HTML?

Deploying websites written in pure HTML is in a sense a return to the roots. In the age of advanced CMSs, hardly anyone remembers that a website can be created without the use of server-side interpreted languages, such as PHP.

Why writing pages using HTML only was forgotten?

  • Due to difficulties in updating their content.
  • Because it is not possible to reuse the code for global elements (such as header, main menu, footer).
  • Due to the static nature of HTML, which makes it difficult to create administrative pages.

So why convert an unused Drupal 8 website to pure HTML?

  • This will result in a rapid increase in the speed of operation of all subpages, including those which have been the slowest so far.
  • It will be very difficult to attack the website if you configure the server properly.
  • Updating the code will become completely unnecessary, the cost of maintenance will be practically zero.

What will be the limitations of a website converted to HTML?

  • Changes to the content will become more time-consuming. The developer will include them in a local copy and then generate the HTML version for publication on the server.
  • Dynamic elements such as forms will stop working.

How to adapt a website for archiving?

Not every website is suitable for archiving right away. First of all, you should make sure that none of the subpages contains any elements requiring PHP scripts to work:

  • Contact forms (they can be replaced with embedded Google Forms).
  • Search engines (they can be replaced with Google search on the website).
  • Views Exposed Filters.
  • AJAX in views.

It is also necessary to disable error messages sent by the server – especially when copying a website from localhost. During archiving you should use settings as similar to production as possible, including CSS/JS aggregation and lack of additional diagnostic information generated by Twig.

At the beginning of the article, we promised to describe the conversion to HTML, based on a real example. Therefore, we are going to present the method of archiving the drupalcamp.pl website, dedicated to the DrupalCamp 2018 conference organised by us. This is a cyclical event, but each subsequent year we prepare a completely new website. Once DrupalCamp has taken place, we leave this page up as a souvenir, archived to HTML at a separate address.

The website of DrupalCamp conference in Wrocław.

What preparations did drupalcamp.pl require? First of all, we removed the subpages with the forms, which were no longer needed, since the conference has already ended. We made sure that all views worked without AJAX on the programme subpages. We also carried out a quick JS audit to eliminate potential code issues when PHP is disabled.

The archiving process

We use the httrack software, which is available under the GNU GPL3 license, in order to automatically archive pages. It is available for Windows, Linux, OSX and Android. We use httrack via a Linux console. There are plenty of switches and options available in the documentation, here is our command to make a 1:1 copy of a website, while maintaining the link structure:

httrack http://example.com -O output_dir --disable-security-limits --max-rate=99999999999 -K3 -X -%P -wqQ%v --robots=0 -N "%h%p/%n.%t"
  • --disable-security-limits - disables the built-in transfer limits, this is useful when our local server is the source.
  • --max-rate - sets the maximum transmission speed.
  • -%P - tries to recognise all possible links to files on the website.
  • -K3 - does not change the links on the pages.
  • -N "%h%p/%n.%t" - does not change file names.
  • -X - on the next command, deletes files from the archived version that were deleted in the original.
  • -wqQ%v - standard mode, silent, with a list of processed files on the screen.

The resulting page image is not yet completely finished. The subpages are in files such as about-us.html, instead of about-us/index.html. A simple script will fix this problem:

#!/bin/bash
for f in $(find output_dir/example.com -name "*.html" -type f); do 
        if [[ $f = *"/index.html" ]]; then
                echo "Omitting $f"              
        else
                echo "Processing $f"
                mkdir "${f%.html}"
                mv $f "${f%.html}/index.html"
        fi
done

The copy created in this way will be indistinguishable from the original to the observer. This is important for the preservation of existing positions in Internet search engines.

Httrack’s compatibility with Drupal

Drupal 8 is not fully compatible with httrack. The main problem is the responsive images presented via the <picture> tag. Proper conversion to HTML requires providing httrack with hints for additional downloads.

The drupalcamp.pl website that we archived is based on Droopler, an in-house, free of charge distribution of Drupal 8. In version 1.3 of Droopler, we have implemented full support for httrack, which helps with identifying and downloading all graphics files used on the website.

How did we “improve” the compatibility with httrack? We used a very simple solution in the form of hooks preparing a list of files to download. Hints for the bot are placed in the <head> section of the page, as subsequent <link> elements:

<link href="https://www.droptica.com/sites/default/files/styles/responsive_image_2000/public/blog/node_52/35080887_779262195604057_3638740630118596608_o.jpg?itok=YkFsAytN" rel="droopler:c0527d:img0" />
<link href="https://www.droptica.com/sites/default/files/styles/responsive_image_1200/public/blog/node_52/35080887_779262195604057_3638740630118596608_o.jpg?itok=OEsKzsbg" rel="droopler:c0527d:img1" />

These elements are recognised by httrack and downloaded to the copy. Thanks to this, we can maintain full responsiveness of the images. The excess code is usually deleted from the console by means of a regular expression.

Conversion results

The result of conversion to HTML is very satisfactory in our case. We’ve got a folder with files of a total size of about 20 MB. As one would expect, the access time to an HTML file is a few milliseconds, meaning that it is negligible. It remains very low even under heavy loads. So far, this value on the production server has oscillated around 200ms (of course for users who weren’t logged in, with active cache). Under the load, it increased to about 700ms.

We checked the correctness of export using Screaming Frog SEO Spider software. It did not detect 404 errors, which means that the archiving was 100% successful. Also, the browser consoles do not show any JS errors.

It can be expected that in the next few days the DrupalCamp 2018 website will be finally retired and replaced by pure HTML version. In this way, we will avoid the need to update it and, therefore, we won’t incur additional costs. If there is a need to make changes to the content, we will make them on a local version, based on Drupal, and then automatically generate a new HTML page. We encourage you to take advantage of our experience!

Sep 19 2018
Sep 19

At Droptica we have always wanted to solve the problem of time-consuming creation of Drupal 8-based small pages from scratch. Finally, we have been able to achieve satisfactory results with Droopler. Version 1.3 is even better.

Why did we make Droopler?

We regularly make small pages for our needs (for example for marketing campaigns or events like DrupalCamp Poland) as well as for our clients.

Making a small website from scratch is time-consuming with Drupal 8, especially if you compare it to Drupal 7 or WordPress. It takes a lot of time to create a nice template that will work well on mobile devices, be easy to expand and comfortable to change.

We considered other technologies for small websites, but then we would have to learn all the processes connected with the new technology. And these would all be processes that we already have in place for Drupal 8 – automated testing, automated deployment to the production server, automated security updates and so on. For these reasons, we have decided to adapt Drupal to our needs.

Maximum flexibility

Our goal was to build a system that would allow you to easily add new subpages. Subpages are supposed to look good on your computer, phone and tablet without the need for using CSS. At the same time, the editor needs to be able to create a wide variety of subpages, and not only those containing the title and text.

We have used Paragraphs and prepared ready-made section types (paragraphs), which can be used to create subpages. Each subpage comprises one or more sections. Sections can be arranged in any order and multiple sections can be inserted on one subpage. Immediately after entering the content and graphics, the sections look very pretty. The editor doesn't need to do anything more – nor do they need any developer support when adding new subpages.

Droopler – it really hits the mark!

The editors are amazed! We have already deployed several dozen pages based on Droopler. Every time, the people who enter the content mention the following advantages of Droopler:

  • each subpage looks very nice,
  • high flexibility, there is no limit to subpages or sections within a subpage,
  • no programming work required to make the website look very good,
  • no worries about the correctness of the HTML code – no need to worry whether, for example, an inserted element will display correctly on the subpage,
  • SEO optimisation, often websites that were switched to Droopler from other systems had better positions in Google search results.

Droopler is a flexible system for creating pretty-looking content and at the same time a platform for virtually unlimited development because it is based on Drupal 8.

Drupal 8 also ensures high security. The Drupal Security Team continuously monitors the system code and releases new versions immediately if any bugs are found.

What's new in Droopler 1.3?

Currently, the latest version of Droopler is 1.3. In this version, we have 13 paragraphs for the types of content used to add subpages – 13 different sections available, which you can use to build any number of subpages.

One of the new paragraphs is side embed. This paragraph allows you to embed external content such as a Google map or a YouTube video in a pretty-looking section. It is perfectly suited for use on the contact page. Video embedding can be used on the page listing clips from recent events in the company, among many other examples. This is just one paragraph – but it gives a lot of possibilities.

Droopler sidebar with embedded content in form of google map

Another new addition to the system is a paragraph for creating a photo gallery. You can now easily build multiple galleries within a single page.

Droopler paragraph with gallery

Version 1.3 offers 6 new paragraphs. You can see them all at https://demo.droopler.com

Droopler is also a blog because these days, everyone needs a blog on the company's website

Most traffic to the websites on the Internet is driven by Google search results. And what matters to Google is basically good content and a lot of it. That's why we've added a blog to Droopler.

Droopler blog is also made up of paragraphs. There is fewer of them, but they are enough to create beautifully looking content. Paragraphs make it easy to embed even full-screen photos into your content. Of course, everything looks nice and pretty on mobile devices as well.

A blog with flexible subpages is a set of very convenient tools for every marketing expert. Building different types of websites for different industries and sectors is simple and enjoyable. Examples of industry websites can be found in the demo: https://demo.droopler.com

Plans for future versions

We are going to continue to develop the system. We often use Droopler for our websites, and our customers use Droopler more and more often. It has already been downloaded more than 600 times from https://www.drupal.org/project/droopler!

We have a long list of changes that we want to implement in the system. One of the larger modules will be a module for product presentation. You will be able to add products with photos, descriptions, categories and tags to the system. There will also be a special page listing products with the option of filtering with the use of Faceted API and Search API. This module will be perfect for production companies and distributors. Together with the existing components, it will enable a very nice presentation of the company's offer on the Internet.

How to get started?

Droopler is free and based on Drupal 8. You can download Droopler from www.droopler.com. A full description of the installation can be found on our blog.
We encourage you to download it and see for yourselves. It's really worth it!

Sep 05 2018
Sep 05

At the last DrupalCon in Nashville, you could hear a lot of interesting lectures. I have chosen ten lectures for you, which I consider to be one of the most interesting. You can find the entire playlist of DrupalCon lectures at https://www.youtube.com/playlist?list=PLpeDXSh4nHjRRbzQW5D6PQVFPrTuh5y8m
Below are some of the lectures you cannot miss.

1. Weather.com’s Project Moonracer – Decoupled User Interfaces

This session will show you how the Weather.com team manages content. An interesting lecture for everyone who plans big changes in the content editing interface in their project.

https://www.youtube.com/watch?v=zn04u3mAQ8o&index=16&list=PLpeDXSh4nHjRRbzQW5D6PQVFPrTuh5y8m

2. Media module in core: Setting up a Drupal 8 media library

Media in the Drupal core. Using media with Drupal has never been easier. After this session, you will know how to use the Media module in Drupal 8 in your projects.

https://www.youtube.com/watch?v=grYtgcZyQBA&index=88&list=PLpeDXSh4nHjRRbzQW5D6PQVFPrTuh5y8m

3. Creating a modern web application

DrupalCon is not only about Drupal. During this session, you will learn how to create a modern web application using Symfony, Doctrine, ReactJS, Redux, Redux-Saga, Ant Design and DVA.

https://www.youtube.com/watch?v=p30Fbdu7qBE&index=80&list=PLpeDXSh4nHjRRbzQW5D6PQVFPrTuh5y8m

4. Build banging sites with BPM: Bricks, Paragraphs and Modifiers

An interesting lecture for site builders. In this presentation, you will learn how to create flexible pages using tools such as Bricks, Paragraphs and Modifiers.

https://www.youtube.com/watch?v=p30Fbdu7qBE&index=80&list=PLpeDXSh4nHjRRbzQW5D6PQVFPrTuh5y8m

5. Everybody Loves Performance: Easy Audits and Low-Hanging Fruit

In this presentation, you will learn about some useful tools for testing your website’s performance and what to look for in particular.

https://www.youtube.com/watch?v=JwtJKWbY9V8&index=57&list=PLpeDXSh4nHjRRbzQW5D6PQVFPrTuh5y8m

6. How Memory Works in PHP and its Hidden Costs

A session for PHP programmers. In this presentation, you will learn a little about how PHP uses memory when it runs your code.

https://www.youtube.com/watch?v=naZUWzM2Wsw&list=PLpeDXSh4nHjRRbzQW5D6PQVFPrTuh5y8m&index=103

7. How Layout Builder will change everything

Layout Builder is another module that will be included in the Drupal core. The module is still included among the “experimental” modules, but it is worth keeping an eye on it now and see its possibilities ahead of time.

https://www.youtube.com/watch?v=xTuOeyx9JLQ&index=125&list=PLpeDXSh4nHjRRbzQW5D6PQVFPrTuh5y8m

8. Crazy Tricks with Views

Some interesting examples using plug-ins and hooks to create your own filters, manipulate view results, or create facet views that go beyond the ready-made widgets.

https://www.youtube.com/watch?v=X6_FyInRQ-I&index=157&list=PLpeDXSh4nHjRRbzQW5D6PQVFPrTuh5y8m

9. Drupal 8, where did the code go? From info hook to the plugin

A session for those who program in Drupal 7 and haven’t yet moved to Drupal 8. In this session, you will learn about the differences in creating things such as blocks between Drupal 7 and Drupal 8.

https://www.youtube.com/watch?v=hf3TbM6wuO0&list=PLpeDXSh4nHjRRbzQW5D6PQVFPrTuh5y8m&index=11

10. Advanced Configuration Management in Drupal 8

Configuration management in Drupal 8 is now available in Drupal core. A lot of people still use Features in Drupal 8, but from this presentation, you will learn how to manage the configuration for multi-site pages and you will learn about the modules useful for configuration management.

https://www.youtube.com/watch?v=Es_K8tIMKks&index=50&list=PLpeDXSh4nHjRRbzQW5D6PQVFPrTuh5y8m

DrupalCon’s lectures are always at a very high level, which is why it is worth going to the next big conference – DrupalEurope 2018. In Germany, you will be able to listen live to equally interesting lectures on Drupal and more – coming up in September!

Aug 27 2018
Aug 27

DrupalEurope is this year’s largest European conference devoted to Drupal. In previous years, each edition of the conference (formerly known as DrupalCon) was attended by about 2000 participants. We already know the programme of the conference with 162 hours of lectures over the course of three days! I decided to go through the programme and make a list of 13 lectures that I think are worth seeing.

1. Driesnote

On Wednesday, 12th of September at 9:00 a.m. Dries Buytaert will talk about the status of Drupal 8. This is a lecture I always attend at DrupalCon. You can learn interesting things about Drupal usage statistics and the system development plans. It's definitely worth attending if you want to know what will happen with Drupal in the coming months.

2. Using React with Drupal. The Basics.

It is actually more of a workshop, rather than a lecture, but in my opinion it’s simply worth going there. The popularity of modern frameworks such as React, Vue and Angular is increasingly growing. At Droptica, we also work with more and more projects using React. If you don't know the React.js library yet, this workshop is a must-see for you. If you already know React, it’s also worth going - if only to see the approach to the subject of another developer.

The lecture will be conducted by Martin Spencer from 1xINTERNET GmbH https://www.drupaleurope.org/session/using-react-drupal-basics

3. Progressive Web Apps for all Drupal sites

PWA brings the possibilities of native mobile applications to websites. I’ve been watching PWA implementations for several months now and there has been a lot of them, and the future is going to bring even more.
At Droptica, we implemented PWA in the TrainingRealm application. Currently, we are working on connecting Vue Storefront with Drupal Commerce, which also implements PWA.

The lecture will be conducted by Chris Ruppel
 https://www.drupaleurope.org/session/progressive-web-apps-all-drupal-sites

4. How we built a government video platform using Vue.js in just 100 days

I love case study lectures, since they allow me to learn about real issues during project implementations, as well as their solutions. In this case study, you can see a combination of all the new trends in online technologies: Drupal 8, Vue.js and media streaming.

The lecture will be conducted by four developers from Digitalist Group https://www.drupaleurope.org/session/how-we-built-government-video-platform-using-vuejs-just-100-days

5. Introducing the Gutenberg content editor for Drupal 8

Personally, I am a fan of the Paragraphs module, which we use in Droopler – our Drupal distribution for creating small websites and for marketing departments. However, I will be happy to learn more about the Gutenberg editor. If it’s stable, then its implementation in Drupal may be a big change for people who work with content on a daily basis.

The lecture will be conducted by Per Andre Rønsen from Frontkom 
https://www.drupaleurope.org/session/introducing-gutenberg-content-editor-drupal-8

6. Drupal distributions panel

Distributions are close to Droptica’s heart, since we run our own distribution – Droopler. In Drupal 8, building a distribution is not as burdensome as in the case of Drupal 7. I see a great potential in the development of distributions and I’ll be happy to listen to the experiences of other developers of such projects.

The panel discussion will be attended by: Cristina Chumillas (Ymbra), Moritz Arendt (GoalGorilla), Miro Dietiker (MD Systems
Kampaweb), Christoph Breidert (1xINTERNET GmbH), Bojan Zivanovic (Commerce Guys), Mohammed J. Razem (Vardot), Keith Jay (Five Mile), Daniel Bosen (Burda Magazine Holding GmbH), Ted Bowman (Acquia) https://www.drupaleurope.org/session/drupal-distributions-panel

7. Drupal 8 migrations by example

It’s time for yet another workshop on our lecture list! It grabbed my attention from the second I noticed the description: “No PHP coding required.” At Droptica, we migrated many websites to Drupal 8, but in most cases YML files alone were not enough. I’ll happily listen to someone else’s experiences with migration to D8.

The workshop will be conducted by Mauricio Dinarte from Agaric https://www.drupaleurope.org/session/drupal-8-migrations-example

8. Autosave and concurrent editing in Drupal 8

The topic of comfortable content editing in Drupal has been very close to my heart in recent months. We have clients who create large amounts of content in their Drupal systems every day, and every slightest improvement to this process is important to them. The modules presented during this lecture can streamline the process of creating content.

The lecture will be conducted by Hristo Chonov from bio.logis GIM GmbH https://www.drupaleurope.org/session/autosave-and-concurrent-editing-drupal-8

9. Creating an enterprise level editorial experience for Drupal 8 using React

Another lecture devoted to content editing and React that is definitely worth seeing. Convenient editing of content in systems where it is abundant is very important can save a lot of time.

The lecture will be conducted by Ruben Teijeiro from 1xINTERNET https://www.drupaleurope.org/session/creating-enterprise-level-editorial-experience-drupal-8-using-react

10. OpenSource meets Enterprise - how Drupal and SAP Hybris can team up

Drupal 8 and SAP in the same lecture – this has to be interesting. I'm always interested in integrating Drupal with other systems, especially large enterprise systems.

The lecture will be conducted by Jan Pilarzeck from Trio-interactive https://www.drupaleurope.org/session/opensource-meets-enterprise-how-drupal-and-sap-hybris-can-team

11. Successfully Proving Enterprise Drupal 8 at Bayer

Bayer, a large international corporation, needs no introductions. This lecture on using Drupal 8 as a platform for over 2000 websites is definitely worth seeing.

The lecture will be conducted by George Steven from Bayer https://www.drupaleurope.org/session/successfully-proving-enterprise-drupal-8-bayer

12. Open Source E-commerce solutions: Stop to compare, start to analyse

Choosing an e-commerce platform is always a difficult task. Many times, we have implemented online shops based on Drupal Commerce, but I am also aware of the existence of strong competition such as Prestashop, Magento, WooCommerce and Sylius. This lecture will be particularly interesting for everybody working with e-commerce implementations.

The lecture will be conducted by Mathieu Le Cain and Fabien Clément from L'équipe.tech https://www.drupaleurope.org/session/open-source-e-commerce-solutions-stop-compare-start-analyze

13. The king is dead, long live the king - or how Hooks were superseded by object-oriented alternatives in Commerce 2.x.

Well-written and clean code guarantees stable operation of the application and its convenient expansion in the future. This lecture seems to be a must-see for every developer planning to use Drupal Commerce.

The lecture will be conducted by Andreas Albers and Jakub Piasecki (one of the best Polish Drupal developers) from Linkfactory A/S https://www.drupaleurope.org/session/king-dead-long-live-king-or-how-hooks-were-superseded-object-oriented-alternatives-commerce

Summary

The above list is a list of lectures that I definitely want to see (unfortunately, I’ll probably have to watch some of them after the conference due to various meetings during the event). Looking back at the previous DrupalCon conferences, the level of the lectures should be high. The speakers are always well-prepared for their lectures.

If you're still thinking about going to DrupalEurope, I think it's definitely worth buying a ticket. You can gain a ton of knowledge, and the event also gives you an opportunity to talk to people who do what you do every day from all over the world. I always come back from these events with a lot of new ideas, which I systematically implement at Droptica.
 

Jul 18 2018
Jul 18

At Droptica, remote work is something ordinary. From the very first day, we had two offices in Wrocław and Gdańsk. Recently, we also opened our third office in Rzeszów. Every day, developers, testers, graphic designers and other specialists work together in each of these locations. In addition, 90% of our clients come from abroad, like in the case of most software houses. Throughout several years, we have developed methods of effective and efficient cooperation in a dispersed team. We are constantly improving our work model, testing new tools and ways of working. In this article, you will learn how our system works today.

Project management support system

Since the beginning of Droptica’s existence, we have been using Redmine. Redmine had several add-ons, including Backlogs module supporting work in the Scrum model. These days, we are using Jira, since it works even better with Scrum. Both systems help us to control what is going on with the projects. Each of the projects is divided into sprints, and each sprint is divided further into specific tasks. All information about the realisation of every task is saved and stored in Jira. Our clients also have access to our Jira for full transparency. In our opinion, such a system is a necessity. Without it, it would be difficult, if not impossible, to control what is going on with the project, especially in the case of projects running for many months. E-mail communication is completely unsuitable for this purpose.

Two communication speeds

Project management support systems are very useful, but not sufficient for efficient implementation of the project. Members of the team must be able to communicate comfortably and quickly. If the team works in one office, it is enough to just talk to somebody and ask. In the case of a dispersed team, this issue becomes quite complex. Writing an e-mail or adding a ticket in Jira to ask a quick question takes time. Most often, you have to do the following:

  • open Jira;
  • find a project;
  • find the right task;
  • add a comment;
  • check in a while if there is an answer;

This process often takes far more time than simply asking the question and getting an answer, especially when it’s a “yes/no” type of question.  

At Droptica, we solve this problem by communicating using Slack. Thanks to this application, our distributed team works as if all the members were located in one office. We communicate quickly and efficiently. We eliminate unnecessary e-mails, phone calls and video conferences. The number of comments to tasks in Jira also goes way down – this is helpful because they often make it difficult to analyse the status of work on a given task. 

Slack at Droptica

We set up several channels for each project. Channels are used to eliminate as many notifications and as much communication via e-mails as possible and to split up messages thematically.

Most often, we set up the following chat channels:

  • projectname chat – a channel for internal communication regarding the project. This channel is used by the entire development team, as well as project support team (DevOps, testers, etc.);
  • projectname client - a channel available to the client and the development team. This channel is a place for communicating with the client, asking quick questions about tasks, setting up meeting dates, calls, etc;
  • channels with notifications from the systems used in connection with a given project, such as Jira, Jenkins, GitHub, Bitbucket, etc. Usually, each system gets its own channel. Every person can join channels that are important for them and eliminate notifications that are not important or redundant, for example, a graphic designer does not need to read GitHub notifications.

Before Slack, we used group chats on Skype, then we moved on to HipChat for a while. We found Slack to be the best solution that fits our needs perfectly and we do not plan to move to any other solution any time soon. It is also important that our clients often already use Slack, which makes it easy for them to join our channels as another organisation.

Other tools supporting remote working

Daily Scrum

There is no Scrum without Daily Scrum. In a dispersed team, it is necessary to conduct a video conference once a day. Sometimes such calls are also attended by the representative of the client, who is often hundreds or thousands of miles away from our offices. We conduct these meetings using several tools, depending on the preferences of the team or our client. Usually, we go for Google Hangouts Meet, but sometimes we resort to Zoom.us and Skype For Business.

Scrum Retrospective

For this purpose, we use a simple Google Docs sheet. We have a sheet with the following columns:

  • drop - what we should stop doing if it's possible;
  • keep - what is good and what we should keep doing;
  • improve - what needs to be improved;
  • add - what we need to add in order to better carry out the work on the project.

The worksheet contains a history of all retrospectives in the form that is easy to view and edit. The document is available to all team members, regardless of their location. This is working very well for us.

Code review

We review the code on GitHub or Bitbucket, depending on the project. These systems allow to easily browse the code and add comments to selected script lines. There is no need for one person to come to the other person's desk to view the quality of the code.

We also have several internal tools and scripts for automating tests that support Drupal development.

Good remote working practices

In my opinion, it is not possible to rely only on communication via e-mail or Jira. Video conferences and telephone calls are necessary to better understand each other. This greatly improves communication within the development team and between the client and the team. One could say that working according to the Scrum methodology forces us to do so. Every day, we carry out Daily Scrum in the form of a video chat. We also often have video calls with customers, for example during the Sprint Review or during the Backlog Refinement. Every once in a while, we also meet with the client at our office or we pay them a visit.

It is also important for the communication process to work in a way that does not disturb others too often. Slack is a very useful tool, but it can also lead to too many unnecessary messages, which can be distracting and interrupt work. The team should be aware of this and use Slack only when necessary and send messages only to those who need them. We try to never involve people whose presence is not necessary in a given case.

Is remote working better than working in one office?

Having the entire team working in one office certainly makes communication much easier. However, it also has its drawbacks – for example, it makes it much easier to disturb somebody while working with unnecessary discussions. Sometimes this can reduce productivity.

At Droptica we combine remote work with office work, which enables us to take advantage of both models. If necessary, we build teams working at just one office.
More than one location gives us a competitive advantage because we have access to more specialists from three cities and their general areas. This allows us to build great development teams for our clients.

The fact that Droptica has multiple offices also forces all of our team members to learn how to work remotely. That’s why all of our experts know how to work with a remote client right away.

Summary

At Droptica, we developed a remote working system that works very well for us. I think that such a model is by no means worse than working in one office, additionally, it also offers many benefits. If you are looking for a team of Drupal, PHP, Symfony or ReactJS experts, we will be happy to assist you and show you that communication with a remote team can also be great.

Jul 18 2018
Jul 18

At Droptica, remote work is something ordinary. From the very first day, we had two offices in Wrocław and Gdańsk. Recently, we also opened our third office in Rzeszów. Every day, developers, testers, graphic designers and other specialists work together in each of these locations. In addition, 90% of our clients come from abroad, like in the case of most software houses. Throughout several years, we have developed methods of effective and efficient cooperation in a dispersed team. We are constantly improving our work model, testing new tools and ways of working. In this article, you will learn how our system works today.

Project management support system

Since the beginning of Droptica’s existence, we have been using Redmine. Redmine had several add-ons, including Backlogs module supporting work in the Scrum model. These days, we are using Jira, since it works even better with Scrum. Both systems help us to control what is going on with the projects. Each of the projects is divided into sprints, and each sprint is divided further into specific tasks. All information about the realisation of every task is saved and stored in Jira. Our clients also have access to our Jira for full transparency. In our opinion, such a system is a necessity. Without it, it would be difficult, if not impossible, to control what is going on with the project, especially in the case of projects running for many months. E-mail communication is completely unsuitable for this purpose.

Two communication speeds

Project management support systems are very useful, but not sufficient for efficient implementation of the project. Members of the team must be able to communicate comfortably and quickly. If the team works in one office, it is enough to just talk to somebody and ask. In the case of a dispersed team, this issue becomes quite complex. Writing an e-mail or adding a ticket in Jira to ask a quick question takes time. Most often, you have to do the following:

  • open Jira;
  • find a project;
  • find the right task;
  • add a comment;
  • check in a while if there is an answer;

This process often takes far more time than simply asking the question and getting an answer, especially when it’s a “yes/no” type of question.  

At Droptica, we solve this problem by communicating using Slack. Thanks to this application, our distributed team works as if all the members were located in one office. We communicate quickly and efficiently. We eliminate unnecessary e-mails, phone calls and video conferences. The number of comments to tasks in Jira also goes way down – this is helpful because they often make it difficult to analyse the status of work on a given task. 

Slack at Droptica

We set up several channels for each project. Channels are used to eliminate as many notifications and as much communication via e-mails as possible and to split up messages thematically.

Most often, we set up the following chat channels:

  • projectname chat – a channel for internal communication regarding the project. This channel is used by the entire development team, as well as project support team (DevOps, testers, etc.);
  • projectname client - a channel available to the client and the development team. This channel is a place for communicating with the client, asking quick questions about tasks, setting up meeting dates, calls, etc;
  • channels with notifications from the systems used in connection with a given project, such as Jira, Jenkins, GitHub, Bitbucket, etc. Usually, each system gets its own channel. Every person can join channels that are important for them and eliminate notifications that are not important or redundant, for example, a graphic designer does not need to read GitHub notifications.

Before Slack, we used group chats on Skype, then we moved on to HipChat for a while. We found Slack to be the best solution that fits our needs perfectly and we do not plan to move to any other solution any time soon. It is also important that our clients often already use Slack, which makes it easy for them to join our channels as another organisation.

Other tools supporting remote working

Daily Scrum

There is no Scrum without Daily Scrum. In a dispersed team, it is necessary to conduct a video conference once a day. Sometimes such calls are also attended by the representative of the client, who is often hundreds or thousands of miles away from our offices. We conduct these meetings using several tools, depending on the preferences of the team or our client. Usually, we go for Google Hangouts Meet, but sometimes we resort to Zoom.us and Skype For Business.

Scrum Retrospective

For this purpose, we use a simple Google Docs sheet. We have a sheet with the following columns:

  • drop - what we should stop doing if it's possible;
  • keep - what is good and what we should keep doing;
  • improve - what needs to be improved;
  • add - what we need to add in order to better carry out the work on the project.

The worksheet contains a history of all retrospectives in the form that is easy to view and edit. The document is available to all team members, regardless of their location. This is working very well for us.

Code review

We review the code on GitHub or Bitbucket, depending on the project. These systems allow to easily browse the code and add comments to selected script lines. There is no need for one person to come to the other person's desk to view the quality of the code.

We also have several internal tools and scripts for automating tests that support Drupal development.

Good remote working practices

In my opinion, it is not possible to rely only on communication via e-mail or Jira. Video conferences and telephone calls are necessary to better understand each other. This greatly improves communication within the development team and between the client and the team. One could say that working according to the Scrum methodology forces us to do so. Every day, we carry out Daily Scrum in the form of a video chat. We also often have video calls with customers, for example during the Sprint Review or during the Backlog Refinement. Every once in a while, we also meet with the client at our office or we pay them a visit.

It is also important for the communication process to work in a way that does not disturb others too often. Slack is a very useful tool, but it can also lead to too many unnecessary messages, which can be distracting and interrupt work. The team should be aware of this and use Slack only when necessary and send messages only to those who need them. We try to never involve people whose presence is not necessary in a given case.

Is remote working better than working in one office?

Having the entire team working in one office certainly makes communication much easier. However, it also has its drawbacks – for example, it makes it much easier to disturb somebody while working with unnecessary discussions. Sometimes this can reduce productivity.

At Droptica we combine remote work with office work, which enables us to take advantage of both models. If necessary, we build teams working at just one office.
More than one location gives us a competitive advantage because we have access to more specialists from three cities and their general areas. This allows us to build great development teams for our clients.

The fact that Droptica has multiple offices also forces all of our team members to learn how to work remotely. That’s why all of our experts know how to work with a remote client right away.

Summary

At Droptica, we developed a remote working system that works very well for us. I think that such a model is by no means worse than working in one office, additionally, it also offers many benefits. If you are looking for a team of Drupal, PHP, Symfony or ReactJS experts, we will be happy to assist you and show you that communication with a remote team can also be great.

Jul 18 2018
Jul 18

Droptica helps clients from all over the world to complete and implement their projects. Each of these clients has already developed their way of working. Everyone is different. In this article, I have collected the most common ways and systems of cooperation between Droptica and our clients.

Why do we work a little differently with every client?

We are Agile. We always want to maximise the results of our work, so our development team always adjusts and adapts their way of working to the client’s needs.
The elements that are adapted and changed the most often include:

  • project implementation methods (SCRUM, Kanban, etc.);
  • number of people in the team;
  • roles in the team (backend developers, frontend developers, QA, UX/UI, etc.);
  • the method of communication; Tools: JIRA, Slack, telephone or video calls, meetings;
  • frequency of communications;
  • communication channels (who, with whom);
  • implementation standards (some clients consider application performance to be the most important, others focus on implementing and providing new functionalities on a regular basis, while another group focuses on aesthetics and want their application to look good).

On the basis of these factors, I have identified several models of cooperation with clients, which are used the most often at Droptica.

Model 1: Product Owner at the client, with the rest of the team at Droptica

This is probably the most popular model employed at Droptica. We use it mainly when the end client comes to us. In most cases, the client already has a web system based on Drupal, Symfony or React and needs developers to develop the system further. Product Owner has a vision of application development and looks for a team that can efficiently perform the envisioned tasks.

In this model, we have a great impact on the development of the system. Our team not only performs assigned programming tasks but also proposes directions of development of the system and suggests improvements. In addition to developing basic functionalities, we also design user interfaces (UX/UI) and often carry out A/B tests that show us the best solutions for the client.

We use this model to develop WydawnictwoWAM.pl website. This is what the client has to say about us and about working in this model: 

"We established cooperation with Droptica around two years ago to develop our online store available at http://www.wydawnictwowam.pl. Both the quality of all the works carried out, as well as our cooperation were stellar. The technical solutions suggested and implemented by Droptica were a great help and often improved the value of our system, often exceeding our initial expectations. Cooperation with Droptica is characterised by very friendly, direct and precise communication on their part. Thanks to that, we were – and constantly are – able to define and detail all the tasks related to the development of our sales platform. We also appreciate their very clear settlement system, which allows us to better plan and allocate funds for development. In other words, we definitely recommend working with Droptica".

Model 2: Product Owner, QA, PM on the client’s side, software developers provided by Droptica

In this model, we provide our customers with solid development support. Most of the project planning and management process is carried out by the client, while our experts carry out specific development tasks.
It is a kind of cooperation that we usually go for with large companies and corporations, expanding their Drupal, PHP and ReactJS teams.
As a rule, in such a model we work on servers and project management systems provided by the client. We adapt to their processes.

Mixed models

Other models are usually combinations of the two models presented above. For example, Droptica provides not only developers but also testers, while the entire project is managed by the client. We also sometimes work on projects where we collaborate with other software developers from the client's company, working not as an independent development team, but a part of a larger team.

We are Agile

We are flexible regarding the form of cooperation with our clients; however, we like the first model the most. In that model, we take on a great deal of responsibility for the project and we are able to influence the direction of development together with the client. This gives us great satisfaction, and we offer numerous ideas for improving the system, which allows our clients to better achieve their business goals.

Would you like to learn more about our work models? Contact us at [email protected] and we'll be happy to talk to you.
 

 

Jul 10 2018
Jul 10
Drupal is fantastic for all sorts of websites and applications. It excels especially at large, complex content projects. If you know what you are doing, you can often cut development time substantially compared to other tools made for the same purpose.  Drupal's versatility, however, is a 2-edged sword. With great flexibility, extensive API and an abundance of modules created by the community, it takes a long time to get up to speed. Often there is not enough time on a project to go through Drupal's steep learning curve.  The more experienced your team is, the more benefits of Drupal you will reap and the less technical debt you will acquire, and the more successful your project will be in the end. Looking for a Drupal team There are a few critical elements you should consider when you are looking for to outsource a Drupal project:
Jul 10 2018
Jul 10

Drupal is fantastic for all sorts of websites and applications. It excels especially at large, complex content projects. If you know what you are doing, you can often cut development time substantially compared to other tools made for the same purpose. 

Drupal's versatility, however, is a 2-edged sword. With great flexibility, extensive API and an abundance of modules created by the community, it takes a long time to get up to speed. Often there is not enough time on a project to go through Drupal's steep learning curve. 

The more experienced your team is, the more benefits of Drupal you will reap and the less technical debt you will acquire, and the more successful your project will be in the end.

Looking for a Drupal team

There are a few critical elements you should consider when you are looking for to outsource a Drupal project:

Experience of the team and its members

It takes time to master Drupal. If you are building a large application, it is good to have at least one really experienced developer/software architect (three or more years of working with Drupal), who delivered in that time a few sizable projects. This person will work as your architect and gatekeeper. Planning architecture, choosing contrib modules and code reviews and helping others would be his daily routine.

The rest of the team also should have had at least some experience in using Drupal, unless you have time to train them. Drupal 8 is a bit easier to pick up by a developer who previously worked with an MVC framework like Symfony or Laravel, but it is still quite far from allowing Drupal newbies to just joining in and coding.  Six months for smaller to 1-2 years in larger applications would be a proper exposure.

Has the team worked together?

This one is not that critical, but having a team that uses similar tools and standards goes a long way towards ensuring that your application is built smoothly. Teams assembled "for one project" tend to do much poorlier than ones that had time to iron out their cooperation practices. 

You can circumvent many of the issues stemming from a distributed by a well-established automation of the software development process. It is though, and so much easier to introduce it if all devs are already used to it.

Communication

How will you communicate with the team? Ensure there will be a clear and easy communication between you and all of the team members directly. There is nothing worse on a project than long communication channels that distort information and extend communication time. 

Trust

Can you build trust? On a long project, it is essential to build a trustworthy relationship between you and the team.  If you feel there are any issues or ambiguous situations, it is better to clear them all before the project begins.

Availability and scaling

Can the team scale if needed? Often projects start small but then grow larger and require more resources. Will the team be able to increase in size or will you have to look for additional people?

The other side of the coin is turnover. An average turnover rate in a software company is about 10-20%. If your team consists of 5 people for a project that lasts a year, it is almost certain that someone will leave. Is the team able to provide a replacement that can start quickly? 

Access to specialist knowledge

If you hire a team of Drupal developers, it is also worth exploring if they will provide you easy access to other services or expertise that might come handy on the project now and then. On a typical Drupal assignment, you may have some tasks that might require:
 - a DevOps specialist (e.g., setting up environments, servers or CI infrastructure)
 - UX/design specialists
 - Quality assurance (testers) who can perform manual or write automated tests of your application

Project setup and delivery

When you have chosen your team, it’s time to set the project up.
I wrote an extensive blog post about organizing work on a software project so that delivery can run smoothly, even if there are multiple independent teams involved.  We are great proponents of automatization. It reduces the workload associated with getting everyone in sync about the current state of the code.

We also recommend using Agile methodologies, which are a fantastic approach to managing a software project. You can read more about how we manage software projects in our blog post about remote SCRUM teams.

Summary

Outsourcing software can bring about many benefits, including reduced cost, access to the specific experience or might just fill a void of specialists on your market.

Choosing the right team for the job is not an easy process. It makes sense to look for the right one, rather than to hire the cheapest or the first one you find. With the right team, you will be able to mitigate many risks that come from hiring external outsourcing provider, like cultural mismatch, communication issues or lack of motivation and deliver your project much quicker and at a reduced cost.
 

Jul 10 2018
Jul 10
React.js is a very popular JavaScript framework created by Facebook. It allows you to build beautiful, interactive and fast interfaces, with which users will fall in love. Drupal, on the other hand, is a fantastic CMS with you can build small, medium and huge websites.   Sometimes you want to pair the two frameworks together - offer sophisticated Drupal backend, and a slick, quick frontend based on React. That is when Drupal and React can come together. In this post, I will explore various methods of combining the technologies.
Jul 10 2018
Jul 10

React.js is a very popular JavaScript framework created by Facebook. It allows you to build beautiful, interactive and fast interfaces, with which users will fall in love. Drupal, on the other hand, is a fantastic CMS with you can build small, medium and huge websites.
 
Sometimes you want to pair the two frameworks together - offer sophisticated Drupal backend, and a slick, quick frontend based on React. That is when Drupal and React can come together.

In this post, I will explore various methods of combining the technologies.

Headless Drupal vs. embedded React

The primary choice you have to make when using React with Drupal is whether you want to use a "headless Drupal" approach where Drupal is only in the backend and React is the only interface user ever sees or whether you just want to add a React app to the Drupal website rendered by the Drupal templating engine. Let me elaborate.

Headless Drupal with React frontend

In a headless scenario, Drupal serves as a backend for a frontend application built in React. The systems are entirely separate and communicate via HTTP - eg. REST of GraphQL.

This option is best if you want to:

  • Create a Progressive Web App (PWA) for users on mobile devices.
  • Create a single page app that stores data in Drupal
  • Create an easy to use the access point to a subset of a big system built on Drupal. Say you have local agents who visit local stores and send screenshots of the merchandise display. They might need only an one easy to use interface without the complexity of your complete CRM of managing stores, which the office uses
  • Create a smaller website that just pulls some data off of a big website, e.g. only displays news from one section of a huge news magazine.

How to create a Headless Drupal app

If you chose headless Drupal, you then build a separate React application which communicates with the backend via HTTP requests, just as you would with any backend system. React then does not really care what is in the backed. It only needs to be able to use the exposed API. 

Facebook prepared a fantastic boilerplate React project to help you start.

When the React app is running, you then create endpoints in Drupal, which serve as data sources for your React app. Drupal 8 is a fantastic piece of software and comes packaged with a full REST API. You can find documentation on Drupal Rest API documentation page. Specifically, have a look at the REST UI module which enables you to create clean configurable endpoints for entities. 
We wrote a great post about setting up REST endpoints for a JavaScript application.

If you prefer to use GraphQL, there is a GraphQL module which is under active development and allows you to build GraphQL endpoints.

If headless Drupal is what you are after, it is also worth checking out an example headless project: the ContentaCMS, which is an entirely headless implementation of Drupal with popular frontend frameworks. The React implementation can be inspected here.

React app embedded in Drupal

Quite often you don't need a full headless implementation, but just want one or two highly interactive elements on a few pages of your website. It might be a very complicated form with many steps which works nicer without a page reload or a different UI element which is highly interactive and will work much nicer done in JavaScript. 

In that case, it makes much more sense to use React.js to create a component and embedded in a page that is served by Drupal. This way you can use all the Drupal greatness everywhere else, in example registration, rendering of fields, views etc.

How to embed  a React app in Drupal

For starters, you will add React library to your website, just like you would add any other js library (e.g. a jQuery or some other library for a slider or gallery). Depending on whether the script is required on every page, or is it part of a theme or a module, there are various ways in which you can add a js library to the website. I will not go to details, because there is a lot of good documentation here:
1. https://www.drupal.org/docs/8/api/javascript-api/add-javascript-to-your-theme-or-module
and 
2. https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
 

A quick method, that is not recommended, but will work for testing purposes, is to just add the script tags to html.html.twig in your template:

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

and your own script with the app.

<script src="https://www.droptica.com/paht/to/my/scripts/myreactapp.js"></script>

One caveat of an embedded app is that the only language you can use is Javascript. You can use neither JSX, nor TypeScript, which you might use when you create a headless app. This is because in a complete react app, Webpack or Babel transpile JSX or TypeScript into JavaScript. Here in our example, for the sake of simplicity, we are not using these tools. 

Tip: To be able to use JSX you would have to use Webpack first to compile your JavaScript file and then add it to Drupal. A good approach then would be to use the create-react-app repo to start and then just copy over the resulting js file created after transpilation and embed that. You would then not need to embed react.js separately because it is already bundled in transpilation. Setting this up, however, so that auto refresh would work and the file would be copied to Drupal, is a bit more complicated and therefore we are skipping it.

Coming back to our example, the first thing to you have to create is an HTML tag in your markup in which the React app will live. It can be a div rendered in a block or by a custom controller on a separate route.

<div id="myreactapp" />

In myractapp.js create your app.

ReactDOM.render(
React.createElement(MyApp, {title: 'Hello World!'}),
  document.getElementById('myreactapp');
);

Done! You have a react app embedded in a Drupal page. You can get data for it from a REST API like you would in the Headless example, or you can use the drupalSettings global for your initial data set.

function Welcome(props) {
 if(props.isfront == true) {
return <h2> Welcome on front page<h2>
}
else{
return <h2> Welcome on another page </h2>
}

ReactDOM.render(
React.createElement(Welcome, {isfront: drupalSetting.path.isFront}),
    document.getElementById('myreactapp');
);

Just remember that if you ever want to save changes to any data in Drupal, you still need to create an endpoint and push the changes there. 

That is it! Combining React and Drupal is as easy as pie.
Enjoy!

Jul 04 2018
Jul 04
Your development team constantly makes the same mistakes and does not improve the quality of its work. Are you familiar with this issue? If so, we have a solution for you and it’s really simple – it’s called Sprint Retrospective.  What is Sprint Retrospective? This is one of the meetings in the SCRUM methodology. The meeting takes place on a regular basis, at the end of each sprint. At Droptica, we hold a meeting once every two weeks. During the meeting, the development team analyses the previous sprints and deliberates about what can still be improved – how to eliminate errors and blockers, and how to speed up work.
Jul 04 2018
Jul 04

Your development team constantly makes the same mistakes and does not improve the quality of its work. Are you familiar with this issue? If so, we have a solution for you and it’s really simple – it’s called Sprint Retrospective. 

What is Sprint Retrospective?

This is one of the meetings in the SCRUM methodology. The meeting takes place on a regular basis, at the end of each sprint. At Droptica, we hold a meeting once every two weeks. During the meeting, the development team analyses the previous sprints and deliberates about what can still be improved – how to eliminate errors and blockers, and how to speed up work.

How does the client benefit from this?

The meeting usually takes no more than 15-60 minutes. A Sprint Retrospective usually has anywhere from three to six participants, depending on the size of the team carrying out the given project. Other companies might implement this process in another way, shape or form. It's easy to calculate that this meeting can cost the client at least several man-hours. Is it worth it? 

Yes – without question! During each meeting, the team proposes improvements and agrees to implement some of them starting with the next sprint. In many cases, these improvements reduce the lead time. The change meeting is held once, and the improvement is applied continuously throughout the subsequent sprints. After a number of sprints, we can achieve pretty sizeable time and money savings.

How do we do Sprint Retrospective at Droptica?

For this purpose, we use a Google Docs – Spreadsheet. There are five columns in the document:

  1. Date;
  2. DROP – what we should stop doing;
  3. KEEP – what we should keep doing;
  4. IMPROVE – what needs to be improved;
  5. ADD – what needs to be added.

During the meeting, each person proposes various improvements that they would like to see and suggests what should be removed, corrected, added, and so on. Once everyone has spoken, the team chooses which of the proposals they want to implement with the next sprint. We try to choose 1-3 suggestions and implement them, so as to avoid making too big changes. We also identify the change owner, who is responsible for implementing the specific change. 

Examples of improvements in software development and DevOps

Below, you can find a list of selected improvements suggested throughout several of our projects. 

  • We run automatic tests more often in order to squish all bugs faster. This allows us to avoid unpleasant surprises a minute before the deployment;
  • We will improve the speed of building a new version of the website on the test server by reducing the database size by about 90%;
  • Before we start working on a task, we talk about business goals, as well as carrying out the tasks from the software development standpoint in order to maintain consistency of the whole application and to choose solutions that are optimal for the project;
  • Code review should be carried out by at least two people;
  • We use git-flow and each task is carried out on its own branch. All tests and code reviews are done on this branch. After these are carried out, we merge the branch with the main development branch; 

Examples of improvements regarding work organisation

  • Every day we send a short message to the client (Product Owner) on Slack with a summary of what we have done since yesterday and what we are going to do today;
  • We break up the tasks in Jira into smaller ones, so that one task takes no longer than 3-4 hours. We can then better follow the progress of the work and quickly react to delays; 
  • If during a sprint it turns out that the task is more difficult than we had anticipated, we change the Story Points for the task; 
  • We continuously update our documentation. We adhere to the principle that if a question is asked at least twice, it should be added to the documentation; 
  • The computer used for video calls must always be connected to the Internet with an Ethernet cable – this removes the annoyance of dropped and lagging video calls;
  • In many projects, we have also removed the deployment from DoD – usually, these deployments take place once every two weeks or once a month, sometimes even on the client’s side. When we have a weekly sprint, this should not block us from closing the task.
  • Planning with taking support into consideration – on the basis of previous sprints we know how much time we spend on things that cannot be planned (for example hotfixes added by the client);

Summary

At Droptica, Scrum Retrospective gave us some tangible effects. I highly recommend this way to objectively look back into the past to every team, even if they do not use SCRUM in project management. You can simply schedule a 1-2-hour meeting in the calendar once every two weeks and talk about what can be improved. You can achieve pretty significant results in just a few weeks. Try it for yourself! 

Jun 13 2018
Jun 13

The deadline is today. A remote development team have worked for several weeks on your software. You obtain the long-awaited access to the system. You check it and you are not satisfied with the achieved results.
All that was needed to avoid this problem is a team with experience in technology and working using SCRUM.

What is SCRUM

Wikipedia defines SCRUM as an agile framework for managing work. It is an approach used in many companies to develop software. Full definition can be found here https://en.wikipedia.org/wiki/Scrum

SCRUM solves most of the problems arising during software development

This is my opinion and many people agree with it. I have been developing commercial projects since 2008. I started as a programmer. Currently, I am supervising high-level projects.

Introduction of the SCRUM method in Droptica solved most of the problems. Which ones exactly?
Here are the most important of them:

  • The client was not regularly informed about the progress of works – the client was not satisfied. Sprints, review, backlog refinement – all this compels a constant contact with the client
  • The tasks were not thought through before starting them, therefore they took a long time to finish – the client was not satisfied. Backlog refinement and planning – these events ensure that the team has to really ponder on completing each task.

SCRUM saves money

You can ask yourself: how is that possible if you do not know the exact duration and cost of the project at its beginning? The answer can be found in the previous paragraph:

  • Regular meetings with the client (Product Owner) force them to think about which tasks are actually needed and which can be rejected.
  • Analysis of tasks by the team together with the PO, often allows to come up with better ways to implement or reject them.

SCRUM is often called the art of maximising work not done. You maximise the rejection of the tasks that are unnecessary from the point of view of your business. You do only the things that bring particular value to the system. Everything else goes straight to the waste bin.

Why so many meetings?

Planning the sprint, daily scrum, retro, review, backlog refinement. The list of meetings is long. There is no doubt that they take time. The client often expects to pay for programming, not for conversations and meetings.

I used to think the same way. However, after a test implementation of SCRUM in one of the projects, I have changed my mind. Now I want to develop all our projects – for clients and internal – using SCRUM. I see that it saves great amount of time and money. The same can be confirmed by the clients with whom we now work using SCRUM, while we did not have a specific way of working before.

Abraham Lincoln once said, "If I had eight hours to chop down a tree, I'd spend six sharpening my ax."

The meetings guarantee a good rethinking of tasks, sticking to a common direction and pursuing the same business goals. It is definitely worth it.

How long will it take and how much will it cost?

Every client asks this question at the beginning. It is not easy to answer it. The pace of each programmer is different, there are different working conditions, holidays, leaves, the requirements change (from the client, legal requirements, etc.). A longer project also means a frequently changing specification. Such changes change the cost and time.

Story Points is a solution to the problem. It is a very good tool for estimating the number of tasks that can be performed in a sprint (stage). After just 2-4 sprints you can see the team's average pace. After such a time the team knows the project well, knows the client well and plans for the future. The team can very accurately estimate the tasks waiting in the Backlog. Product Owner, knowing the pace of the team can count the number of sprints and the total cost.

Compared to creating a detailed specification at the beginning of the project, such an approach gives better estimation results.

SCRUM is not enough if the team does not have the experience with the technology

If the team will work using SCRUM, but will not be familiar with the technology, it will not be able to provide good quality software within a reasonable time. Only the combination of SCRUM and the team experienced in using the given technology ensures significant effects. The customer will definitely be satisfied with such a combination.

Why a remote team is better?

What is the difference between a remote team and a local team? Actually – just their location. If you can have a local team, it is worth choosing this option. It will be more convenient.

However, in today's IT market it is difficult to complete a team of 2, 3 or more specialists in a short time for a larger project. That is why you should think about a remote SCRUM team. A team that already has the experience in working with a remote client. By expanding the options to the whole world, you have more choices.

How can I monitor what a team thousands of miles away is doing? 

SCRUM has a way to do it: Sprint Burndown Chart. It is a chart that is updated daily. It shows the regular peace of project development. It shows whether the team implements the sprint plan. It is the best tool for monitoring the progress of works. Using Waterfall, you usually find out about delays at the end of a larger stage. With SCRUM, the client can check every day what progress the team has made. They can be sure that the team works and delivers consecutive parts of the software.

How to communicate with the team?

At Droptica we have 3 ways to do that:
- Jira - it is the main communication system; here we have all User Stories and tasks
- Slack - for short text questions, used practically every day
- Skype/Google Hangouts/Zoom - for video calls with screen sharing

These three forms of communication in 100% ensure a very good communication between the team and the Product Owner.

If possible, once in a while, the development team meets with the Product Owner at our office or in the client's office. Our offices are located close to the airport, we eagerly invite our clients to visit them.

How can I check if a remote SCRUM team will work in my case?

If you have a project for a minimum of 2-3 people for a few sprints, a well-conducted SCRUM will provide you with very good results.

If you are not sure if SCRUM will work for you, test it. Order 2-3 sprints and see what results you will get. It is a small cost within the scale of projects taking several months, and such an approach will provide an unambiguous answer to the question of whether it is worth using SCRUM.

If you still have doubts about a remote SCRUM team, I will be happy to answer your questions and share my experiences. Write at [email protected] or write your question in the comment.

Jun 13 2018
Jun 13

The deadline is today. A remote development team have worked for several weeks on your software. You obtain the long-awaited access to the system. You check it and you are not satisfied with the achieved results.
All that was needed to avoid this problem is a team with experience in technology and working using SCRUM.

What is SCRUM

Wikipedia defines SCRUM as an agile framework for managing work. It is an approach used in many companies to develop software. Full definition can be found here https://en.wikipedia.org/wiki/Scrum

SCRUM solves most of the problems arising during software development

This is my opinion and many people agree with it. I have been developing commercial projects since 2008. I started as a programmer. Currently, I am supervising high-level projects.

Introduction of the SCRUM method in Droptica solved most of the problems. Which ones exactly?
Here are the most important of them:

  • The client was not regularly informed about the progress of works – the client was not satisfied. Sprints, review, backlog refinement – all this compels a constant contact with the client
  • The tasks were not thought through before starting them, therefore they took a long time to finish – the client was not satisfied. Backlog refinement and planning – these events ensure that the team has to really ponder on completing each task.

SCRUM saves money

You can ask yourself: how is that possible if you do not know the exact duration and cost of the project at its beginning? The answer can be found in the previous paragraph:

  • Regular meetings with the client (Product Owner) force them to think about which tasks are actually needed and which can be rejected.
  • Analysis of tasks by the team together with the PO, often allows to come up with better ways to implement or reject them.

SCRUM is often called the art of maximising work not done. You maximise the rejection of the tasks that are unnecessary from the point of view of your business. You do only the things that bring particular value to the system. Everything else goes straight to the waste bin.

Why so many meetings?

Planning the sprint, daily scrum, retro, review, backlog refinement. The list of meetings is long. There is no doubt that they take time. The client often expects to pay for programming, not for conversations and meetings.

I used to think the same way. However, after a test implementation of SCRUM in one of the projects, I have changed my mind. Now I want to develop all our projects – for clients and internal – using SCRUM. I see that it saves great amount of time and money. The same can be confirmed by the clients with whom we now work using SCRUM, while we did not have a specific way of working before.

Abraham Lincoln once said, "If I had eight hours to chop down a tree, I'd spend six sharpening my ax."

The meetings guarantee a good rethinking of tasks, sticking to a common direction and pursuing the same business goals. It is definitely worth it.

How long will it take and how much will it cost?

Every client asks this question at the beginning. It is not easy to answer it. The pace of each programmer is different, there are different working conditions, holidays, leaves, the requirements change (from the client, legal requirements, etc.). A longer project also means a frequently changing specification. Such changes change the cost and time.

Story Points is a solution to the problem. It is a very good tool for estimating the number of tasks that can be performed in a sprint (stage). After just 2-4 sprints you can see the team's average pace. After such a time the team knows the project well, knows the client well and plans for the future. The team can very accurately estimate the tasks waiting in the Backlog. Product Owner, knowing the pace of the team can count the number of sprints and the total cost.

Compared to creating a detailed specification at the beginning of the project, such an approach gives better estimation results.

SCRUM is not enough if the team does not have the experience with the technology

If the team will work using SCRUM, but will not be familiar with the technology, it will not be able to provide good quality software within a reasonable time. Only the combination of SCRUM and the team experienced in using the given technology ensures significant effects. The customer will definitely be satisfied with such a combination.

Why a remote team is better?

What is the difference between a remote team and a local team? Actually – just their location. If you can have a local team, it is worth choosing this option. It will be more convenient.

However, in today's IT market it is difficult to complete a team of 2, 3 or more specialists in a short time for a larger project. That is why you should think about a remote SCRUM team. A team that already has the experience in working with a remote client. By expanding the options to the whole world, you have more choices.

How can I monitor what a team thousands of miles away is doing? 

SCRUM has a way to do it: Sprint Burndown Chart. It is a chart that is updated daily. It shows the regular peace of project development. It shows whether the team implements the sprint plan. It is the best tool for monitoring the progress of works. Using Waterfall, you usually find out about delays at the end of a larger stage. With SCRUM, the client can check every day what progress the team has made. They can be sure that the team works and delivers consecutive parts of the software.

How to communicate with the team?

At Droptica we have 3 ways to do that:
- Jira - it is the main communication system; here we have all User Stories and tasks
- Slack - for short text questions, used practically every day
- Skype/Google Hangouts/Zoom - for video calls with screen sharing

These three forms of communication in 100% ensure a very good communication between the team and the Product Owner.

If possible, once in a while, the development team meets with the Product Owner at our office or in the client's office. Our offices are located close to the airport, we eagerly invite our clients to visit them.

How can I check if a remote SCRUM team will work in my case?

If you have a project for a minimum of 2-3 people for a few sprints, a well-conducted SCRUM will provide you with very good results.

If you are not sure if SCRUM will work for you, test it. Order 2-3 sprints and see what results you will get. It is a small cost within the scale of projects taking several months, and such an approach will provide an unambiguous answer to the question of whether it is worth using SCRUM.

If you still have doubts about a remote SCRUM team, I will be happy to answer your questions and share my experiences. Write at [email protected] or write your question in the comment.

Jun 06 2018
Jun 06
Droopler is a state-of-the-art open source tool for building websites, built on the latest version of Drupal 8. The system has been designed in order to enable easy and flexible modification of content that looks great on every device. You can find out more at www.droopler.com. A demo version of the system is available at https://demo.droopler.pl/. Before you can familiarise yourselves with the possibilities and functionalities offered by Droopler, I will guide you through the set-up process. Good luck!
Jun 06 2018
Jun 06

Droopler is a state-of-the-art open source tool for building websites, built on the latest version of Drupal 8. The system has been designed in order to enable easy and flexible modification of content that looks great on every device. You can find out more at www.droopler.com.

Droopler logo combining a letter D in shades of blue and black "Droopler" text
A demo version of the system is available at https://demo.droopler.pl/.
Before you can familiarise yourselves with the possibilities and functionalities offered by Droopler, I will guide you through the set-up process.

Good luck!

Technical requirements

Several technical requirements have to be fulfilled before set-up can begin. The following stack is required to set-up Droopler:

  • Apache (or another web server),
  • SQLite, MySQL, MariaDB, Postgresql or another database;
  • PHP 7.

Most shared hosting providers (sharehost) offer such a stack. Before starting the set-up process, it is worth checking whether PHP version is set to 7.

Setting up Droopler

The following set-up process is intended for users who do not have root access to the operating system (shared hosting, etc.).

Step 1 – Downloading files to the server

The following steps should be executed in the directory to which the domain is pointed (DocumentRoot).

Consolepath shown in domains
Method 1

This method can be used if your hosting provider provides a connection to the server via SSH. 
Important:before you use this method to set-up Droopler, make sure that commands such as 

composer --help
npm help
gulp -version

are available. If executing the above commands does not return any “command not found” messages or other errors, you can carry on. Otherwise, go straight to method 2 :-)
In this method, you just need to execute the commands listed below to download the necessary files:

git clone -b no_web https://github.com/droptica/droopler_project
cd droopler_project
composer install
composer drupal-scaffold
composer install

At this point, you just have to compile SCSS files to CSS.  In order to do so, simply follow the instructions below:

cd web/themes/custom/droopler_subtheme
npm install
npm install --global gulp-cli
gulp compile

Method 2

1. Download the turnkey package from https://www.droopler.com/download
2. Unpack the downloaded package and upload it to the server via FTP.

Step 2 - setting up Droopler 

Launch your browser and enter the address. You will be automatically redirected to the Droopler set-up wizard. Follow the instructions of the wizard to complete the set-up process.

Droopler profile creator, step one, choosing language

Droopler profile creator, step two, configuration of database

Droopler profile creator, step three, installation in progress

Droopler profile creator, step four, configuration of site name and e-mail address

Droopler profile creator, step four, final message that summarise previous steps, new site is ready

Setting up Droopler in Docker using the dcon tool

Important:  Root access to the operating system is required to perform the steps listed below.

Install the dcon tool, according to the instructions at https://github.com/droptica/docker-console, and run an https://github.com/droptica/nginx-proxy container.
We wrote more about running dcon and nginx-proxy in one of our previous articles.
In order to run Docker containers on which Droopler will operate, you need a docker-compose.yml file. You can download a sample wrapper, where you will find the required files. 

git clone https://github.com/DropticaExamples/droopler-wrapper-example.git

Change the VIRTUAL_HOST parameter to the domain address of your own page in the downloaded docker-compose.yml file. When you publish your website online, it is also worth removing or commenting out the phpmyadmin container for security reasons.
Now, you need to download the Droopler repository to the /app directory – execute the following command in the directory to which you downloaded the repository (wrapper) beforehand:

git clone https://github.com/droptica/droopler_project app

To build and launch the docker containers, execute the following commands in the console:

dcon update-images
dcon up

All that you have to do is to launch the installation of a Droopler profile:

dcon build-profile

You will be asked to enter a GitHub token. Copy the link and load the page, a token will be generated, which you need to copy to the console and confirm by pressing enter.

The link with token shown next to "head to" circled in red
After carrying out multiple operations, Droopler will be ready for the first launch. Start the browser and enter the address of your page.

Updating

Droopler is constantly developed and expanded with new functionalities. In order to develop these features on your website, you should make sure to update the system on a regular basis. Updates also include security patches.
IMPORTANT! We strongly suggest making a back-up of your files and database, as well as enabling maintenance downtime – example.com/admin/config/development/maintenance – before updating Droopler.
You can update Droopler in one of two ways:

Method 1

If you set-up Droopler by downloading the codebase from the https://github.com/droptica/droopler_project repository, this method is intended for you :)
Connect to the server via SSH and execute git pull command in the directory, where you downloaded the repository beforehand.
The next step depends on whether you have installed the dcon tool or not. If dcon is available, execute the following command:

dcon compose-update

However, if you do not have dcon installed, you will need to execute:
 

composer update

Method 2

Download a new build from https://www.droopler.com/download
The downloaded package needs to be unpacked and uploaded to the server via FTP, overwriting the existing files on the server.
Launch your browser and go to www.example.com/update.php 

Conclusion

Congratulations! You just learned several ways to set-up and update Droopler, a Drupal distribution. As you can see, this is really easy :-) However, if you stumble upon any issues that you can’t solve on your own, leave us a message. We’ll be glad to help you!

Mar 16 2018
Mar 16

Droptica is an amazing company. I've worked with Drupal specialists in the past... Nothing worked in terms of quality and value, but they hit the sweet pot. They provided good-quality code at a reasonable price point.

Founder, E-Commerce Platform

I could not rate Droptica highly enough. They have genuinely helped our dream service became a reality... The site is looking awesome, and we can't wait to relaunch. We have untold efficiency gains now.

Head of IT, Compliance & regulatory Platform

Mar 16 2018
Mar 16

Yoast SEO is a module that has everything you need to make your content visible to search engines. The plug-in that took the WordPress community by storm is slowly getting more and more traction in the Drupal community as well.
What exactly is SEO? SEO is an acronym of Search Engine Optimisation, which basically means optimising websites for a search engine, which in reality translates into getting your website as high as possible in search results, and thus getting more and more people to visit the website.
Before using the module, it is worth investing some time in getting hang of the basic requirements for SEO, this will make it easier to understand some rules and principles which you should adhere to. There is a lot of more and less useful information on the Internet regarding that subject. There are also many SEO analysers available online, but they only enable you to analyse content that you already have on your website. The module I present today gives you an advantage, because it allows you to check your content during the process of writing the article. I am not going to discuss the recommendations and principles of SEO, which should be used. Instead, the main goal of this article is showing you the benefits of a module that will help you optimise your content.

Setup:

We are going to start by installing the module on our Drupal 8 based website. At the time of writing this article, I have been using the latest available version of the yoast_seo module (8.x-1.3)
The module is available here https://www.drupal.org/project/yoast_seo 
In order to install the Real-time SEO for Drupal module, you first need to add the required modules which are not included in Drupal core – Metatag and Token.

The Yoast SEO module checked on the list of available modules. Additional information, including other modules needed to install Yoast are provided below the main description

Settings view:

After going to the settings view, you will have access to three sections, namely: 

  • SITEMAP
  • CONFIGURE METATAG DEFAULT TEMPLATES 
  • CONFIGURE REAL-TIME SEO BY BUNDLES

Aforementioned three sections one under the another, with additional descriptions

We are going to ignore the top two because they are used for configuring sitemap and metatags. Instead, we are going to focus on the last one because that’s exactly where we will be able to play with the module settings. As you can see, there are not many options to choose, the only thing you can set are types of content for which the Yoast widget will be active.
By default, the plug-in should be set to active for all the available options.

Permissions:

In the permission settings, you can assign user roles for managing the module settings, as well as pick users who can use it. We recommend leaving administration to administrators. Additionally, you should enable the plug-in for every user who creates content for your website, because you certainly want your content to be as optimised as possible.

Permission label. Some options are mentioned along with checkboxes under the user roles

Adding a node, whole page view. Below, under the fields, you can see the Yoast module widget.

Adding a node, whole page view.

The widget is divided into three main sections:

  • Focus keyword, where you can check the keywords in your article.
  • Snippet editor, showing you how your website is seen by Google. It displays the elements such as the title and description.
  • Content analysis, which analyses the content of your article. Thanks to coloured tags, you will find it easy to see whether your article was written well from the SEO perspective. It also shows you how many words are there in your article.

A close up on information provided by YOAST

Note: The plug-in uses Flesch reading content analyser, which currently works properly for English, German and Dutch.
An example article from Droptica blog analysed using Yoast SEO plug-in.

A sample page analysed by module. Red dot signifies things that should be reworked. Green ones mark areas where the blog post is doing great

By setting up this simple module, you can make work easier both for yourself, as well as for other people who create or edit the content on your website. After all, when you create something you want to make sure that it is of the highest possible quality and that it reaches as many people as possible. I believe that thanks to the Yoast plug-in, you can achieve that in a simple and clear way. Perhaps thanks to this tool you will understand better how the website is seen by the search engines, and you will be able to make the content attractive not only for your readers but also for robots... since as you probably already know, they’re all around us.

Mar 05 2018
Mar 05
In one of our previous articles, we showed you how to configure CKEditor in Drupal 8. This time, we are going to demonstrate how you can expand the editor’s functionality on your own.   In the case of many websites, the basic functions of CKEditor are more than enough.  However, there are projects where clients demand expanding the functionality of the content editor. With CKEditor, you can do that using plug-ins – all of them are available on the official website.http://ckeditor.com/addons/plugins/all  Adding a new plug-in to the website based on Drupal 8 is very simple compared to the way it was done in the previous version of Drupal. All you need is to create a simple module.  
Mar 05 2018
Mar 05

In one of our previous articles, we showed you how to configure CKEditor in Drupal 8.
This time, we are going to demonstrate how you can expand the editor’s functionality on your own.
 
In the case of many websites, the basic functions of CKEditor are more than enough. 
However, there are projects where clients demand expanding the functionality of the content editor.
With CKEditor, you can do that using plug-ins – all of them are available on the official website.
http://ckeditor.com/addons/plugins/all 
Adding a new plug-in to the website based on Drupal 8 is very simple compared to the way it was done in the previous version of Drupal. All you need is to create a simple module.
 
As our example, I chose a plug-in that will enable us to post a YouTube clip using an embed code or its URL.
 

The catalogue tree with the structure of the module

The plug-in in question: https://ckeditor.com/cke4/addon/youtube 
Create a module named cke_youtube (or choose your own name).
 
The structure of the module is as follows:
 
cke_youtube.info.yml file contains the standard data of the module.
cke_youtube.module file is an empty PHP file, we don’t need any code there.
 
The structure contains two additional directories:
Plug-in directory - js. 
There, you will find another directory named “plugins”.
Unpack the files downloaded from https://ckeditor.com/cke4/addon/youtube  there.
 
 The -js. plugin catalogue visible in the catalogue tree of module

Creating a new plug-in in Drupal takes place in a new class file, which we have to create and then properly configure.
In our case, it is going to be Youtube.php, and the entire structure needs to look like as follows.
 

full structure of module

Code:

<?php

namespace Drupal\cke_youtube\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginInterface;
use Drupal\ckeditor\CKEditorPluginButtonsInterface;
use Drupal\Component\Plugin\PluginBase;
use Drupal\editor\Entity\Editor;

/**
 * Defines the "Youtube" plugin, with a CKEditor.
 *
 * @CKEditorPlugin(
 *   id = "youtube",
 *   label = @Translation("Youtube Plugin")
 * )
 */
class Youtube extends PluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface {

  /**
   * {@inheritdoc}
   */
  public function getDependencies(Editor $editor) {
    return [];
  }

  /**
   * {@inheritdoc}
   */
  public function getLibraries(Editor $editor) {
    return [];
  }

  /**
   * {@inheritdoc}
   */
  public function isInternal() {
    return FALSE;
  }

  /**
   * {@inheritdoc}
   */
  public function getFile() {
    return drupal_get_path('module', 'cke_youtube') . '/js/plugins/youtube/plugin.js';
  }

  /**
   * @return array
   */
  public function getButtons() {
    $iconImage = drupal_get_path('module', 'cke_youtube') . '/js/plugins/youtube/images/icon.png';

    return [
      'Youtube' => [
        'label' => t('Add Youtube Video'),
        'image' => $iconImage,
      ]
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function getConfig(Editor $editor) {
    return [];
  }

}

The YouTube class uses two interfaces -  CKEditorPluginInterface, CKEditorPluginButtonsInterface
Take a closer look at its comment. The “id” variable must contain the same name as the name of the plug-in you’re installing. 
In this case, the name is “youtube”.
For other plug-ins, you will find the name in the plugin.js file.

Plugin.js file. The name in the bracket is name of your plugin. Here: Youtube name is visible

Below we will briefly discuss all the methods and what they do:
getDependencies()
Here you will put in all the names of the plug-ins which are required for your plug-in to work.
If they are not needed, you leave the method empty, and our YouTube plug-in is one of such cases.
You will find the required plug-ins in the plugin.js file.
Example for Layout Manager plug-in:
 

List of plugins needed to install tle "layout manager" plugin from plugin.js file

In this case, you would have to first install basewidget, and then add layoutmanager.

getLibraries()
Specifies additional libraries.

getFile()
Plug-in location.

getButtons()
Adds a new button to the editor.
 
Keep in mind that you have to use a correct name in the return array:
In the case of this plug-in, the correct name is “Youtube”.

The right name used in the table. At this case it's "Youtube"

You can find the required name in the plugin.js file.

Plugin.js file. The name after .addbutton is the name of your plugin.

At the point where the entire structure and names are correct, you can turn on your new module.
Go to Extend (/admin/modules/)
 

Extend/admin/modules with new plugin available

Now, go to text formats and editor configuration

Configuration → Content Authoring → Text formats and editors (/admin/config/content/formats/)

Add a new button to the editor for a selected format.

New button is being added to CKEditor

After applying changes, add new content and select text format for which you just set up the Add YouTube Video button.
If everything works well, a window will open after clicking the button, allowing you to put in your embed code or URL to your clip.

"Embed youtune video" window that let's the user to add youtube films to the page that appeared after using the new button of the CKEditor.

Feb 07 2018
Feb 07

The projects implemented by Droptica require a large amount of coding in PHP. Taking advantage of various tool and configurations allows us to streamline the process and make it far more convenient and pleasant. In this post, we wanted to share our experiences and describe an ideal software configuration for coding in PHP (mainly in Drupal) from our standpoint at Droptica. The base software that we use includes Linux (most people use Ubuntu) and PHPStorm as IDE. We also use Docker for setting up and running services like Apache, MySQL, Solr, etc. 

Docker instead of locally installed Apache and PHP

Many web developers prefer installing a full LAMP stack on their local server, with Apache/MySQL and PHP installed on top of Linux. This is not a bad solution, but such a local installation is always going to be different from the client’s server environment. And in this case, the more differences, the more work and potential conflicts you will face, along with the “works for me” responses. :-)
Docker offers a nice solution to this issue, as it allows you to run identical server configurations in both development and production environments. However, the most crucial advantage of Docker is the fact that the developer is no longer required to manually configure all the .conf and .ini files. Thanks to Docker, you can focus on coding and leave all the server matters in the hands of experts.
At Droptica, we use a custom piece of software called docker-console, which allows our developers to quickly start a new or existing project in Drupal. Tools such as Composer, Drush, Sass/Compass are in their containers and they work without the need to install them locally on developer’s machine. Usually, they also have a range of tools for making debugging easier at their disposal. One of such tools is Mailcatcher, which catches all the e-mails sent by Drupal.

Nginx proxy for Docker

The nginx proxy image for Docker allows for using hosts (local domains) in order to display websites running on Docker in a web browser. In short, thanks to nginx proxy, we can type in http://www.droptica.dev instead of an IP address (for example: "172.17.0.4".) Nginx proxy is very useful when we are running a Drupal multisite and there are multiple domains under a single container’s IP address (e.g. sites/droptica.com, sites/droptica.pl).
Installing nginx proxy:
1. Before installation, make sure to remove all the existing versions of nginx proxy. Depending on the name, it is going to look more or less like:

docker stop ngnix-proxy && docker rm ngnix-proxy

2. Clone the repository: https://github.com/droptica/nginx-proxy 
3. Enter the repository directory and run it using the command:

docker-compose up -d

4. Check nginx IP, if the address changed, change it in the /etc/hosts file:

docker inspect --format
"{{ .NetworkSettings.IPAddress }}" nginx-proxy

5. If you want to add https for a xxx.dev domain, copy default.crt and default.key files to xxx.dev.crt and xxx.dev.key. It is possible that you will have to do chmod 777 on them and then restart the nginx container:

sudo chmod 777 -Rf certs && docker-compose restart

6. Add the code responsible for https to the configuration file (example for the xxx.dev domain):

if(strpos($_SERVER['SERVER_NAME'], 'xxx') !== FALSE) {
  $base_url = 'https://'.$_SERVER['SERVER_NAME'];
  $conf['https'] = TRUE;
}

7. When the machine runs something on port 80 (apache/nginx), comment the following lines in docker-compose.yml:

ports:
    - 80:80 
    - 443:443 

8. Docker compose version 2 and higher with nginx-proxy. On versions newer than 1, docker-compose sets private network for the containers, and because of that nginx-proxy cannot connect to it by default. In order to get it running, you have to find out the network and add it manually.

# list networks
docker network ls

# connect you nginx_proxy to your network
docker connect you_network_name nginx_proxy

PHP CodeSniffer

PHP CodeSniffer is a very useful tool, which helps you maintain clear codebase, conforming to standards. As you can read in the Readme file, CodeSniffer is made up of two scripts. One is used for detecting violations of a defined coding standard (phpcs), and the other is used to automatically correct coding standard violations (phpcbf). 
PHPStorm, however, only allows you to use the former one (phpcs). After configuration, all the lines containing code violating the standard will be highlighted in the currently edited file.
In order to be able to use PHP CS, you have to install it first, for example by using composer or in any other way described in the project’s readme file. https://github.com/squizlabs/PHP_CodeSniffer 
for instance:

composer global require "squizlabs/php_codesniffer=*"

If you did not add the $HOME/.composer/vendor/bin path to your $PATH variable, you should do it now. To do this, in the case of Linux, add the following line at the end of the ~/.bashrc file:

export PATH="$PATH:$HOME/.composer/vendor/bin"

In order to apply the changes, log out and log back in or execute the following command:

source ~/.bashrc

Another thing that you have to do is adding Drupal coding standards to PHP CS. Simply install the coder module - https://www.drupal.org/project/coder.
The easiest way to do it is by using composer:

composer global require drupal/coder

The detailed installation instructions can be found here: https://www.drupal.org/node/1419988 
Before you move on to the next step, make sure that there is no second instance of PHP CS installed anywhere in the system, you can do this by executing the following command:

whereis phpcs

It should return an output that is similar to the one below:

phpcs: /home/<username>/.composer/vendor/bin/phpcs

If the command returns more locations, you should get rid of the unnecessary versions, so that only one remains on your machine.
Then, register Drupal standards from the coder module:

phpcs --config-set installed_paths ~/.composer/vendor/drupal/coder/coder_sniffer

After installing PHP CS and Coder in the system, you can move on to configuring PHPStorm:
Settings -> Languages & Frameworks -> PHP -> Code Sniffer
In the “Development environment” section, click three dots next to the “Configuration” option.

PHPStorm window visible. There is box with "local" text inside and an arrow. Further right there is a button with three dots on it

In the Code Sniffer window, provide the path to the phpcs script (the one returned by the whereis phpcs command) in the “PHP Code Sniffer (phpcs) path” for the “Local” configuration.

A path to the "Local" configuration pasted in the box in the upper right corner of the window

After entering the path, click Validate in order to make sure that PHP CS works fine. If everything works, you should see the following message on a green background:

Validated file. The label "ok, PHP_CodeSniffer version 3.0.2 (stable) by Squiz (http://squiz.net) visible on the green background, as described in the text.
Then, turn on inspecting code by Code Sniffer. You can do it by going to the settings:
Settings -> Editor -> Inspections 
Select PHP from the list of languages, and then turn on
‘PHP Code Sniffer validation’. After ticking the checkbox, refresh the list of available coding standards A PHPStorm "reload icon" and then choose Drupal. 

A drop-down menu of described configuration visible. The cursor highlights Drupal among the others visible on the list
After applying the settings, you can open a PHP file and check how Code Sniffer works.

Xdebug (working on every project)

XDebug enables debugging web applications developed in PHP in a “classic” style, using breakpoints and running code line-by-line. XDebug is fully compatible with PHPStorm, and connecting the IDE to the debugger is very simple. 
Regardless of whether you use docker or set up the entire environment all by yourself, XDebug should broadcast information about the scripts on port 9000. In order to make PHPStorm listen to this port, click “Run -> PHPStorm "Start listening" icon Start listening for PHP Debug Connections”. After refreshing the debugged page in the editor, a window will open, confirming that the connection with XDebug has been successfully established. Sometimes it may be necessary to adjust directory mapping between the server’s webroot and project directory in PHPstorm.
If the connection was not established properly, first make sure that XDebug works at all (by running php --version or phpinfo()). Then check whether you need any bookmarklets (specially prepared links added to bookmarks) activating debugging. You can find them at https://www.jetbrains.com/phpstorm/marklets/ 
A very good and in-depth manual regarding connecting XDebug and PHPStorm is available here:
https://confluence.jetbrains.com/display/PhpStorm/Zero-configuration+Web+Application+Debugging+with+Xdebug+and+PhpStorm 

XDebug plug-in for Chrome/Firefox

There are many plug-ins available, just install it, enable it for a given page and enjoy the possibilities offered by XDebug.
Some examples:
Firefox: https://addons.mozilla.org/en-US/firefox/addon/xdebug-helper-for-firefox/ 
Chrome: https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc 

MySQL Workbench

A piece of software for managing MySQL databases. It allows you to import and export databases, view tables, as well as query databases, regardless of whether they are local, in docker or remote via ssh. It does not have any limits regarding the size of an imported database (compared to the default PHPMyAdmin configuration).  
The packages can be downloaded at https://dev.mysql.com/downloads/workbench/, after downloading just install them.

Chrome plug-in for JS debugging

The add-on is available for Chrome only:
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji 

Code formatting in PHPStorm:

Drupal has a very specific code formatting standards. Some of the most important things to remember are indent of two spaces, as well as putting else/elseif/catch/while always in a new line. PHPStorm is compatible with Drupal out of the box. 
Simply go to Settings -> Editor -> Code Style -> PHP and select Set From -> Predefined Style -> Drupal. Do not forget about formatting settings for CSS, JS, SASS/LESS.

Drupal Coding standards chosen in PHPStorm settings

Additional PHPStorm configuration

Below you can find some additional PHPStorm configuration options, which also make your work easier by automatically formatting your code according to the accepted standards:
Automatically adding an empty line at the end of the file when saving: 
Settings -> Editor -> General, select Ensure line feed at file end on Save
Automatically removing white spaces at the end of the lines when saving the file.
Settings -> Editor -> General, Strip trailing spaces on Save, select ‘All’. 
You can also choose ‘Modified Lines’ if you do not want white spaces to be removed from other places in the code, which were not modified.
Automatically formatting the code after typing in the closing curly bracket.
Settings -> Editor -> General -> Smart Keys, select Reformat block on typing '}'

Summary

The above article features our current recommendations. They are different now from what we recommended a year or two ago, and they will probably be different in the future – the configuration will get even better. :)
Is there anything that we should improve in your opinion? Perhaps you have your own way to configure your development environment? Share your insights and ideas in the comments!

Feb 07 2018
Feb 07

The projects implemented by Droptica require a large amount of coding in PHP. Taking advantage of various tool and configurations allows us to streamline the process and make it far more convenient and pleasant. In this post, we wanted to share our experiences and describe an ideal software configuration for coding in PHP (mainly in Drupal) from our standpoint at Droptica. The base software that we use includes Linux (most people use Ubuntu) and PHPStorm as IDE. We also use Docker for setting up and running services like Apache, MySQL, Solr, etc. 

Docker instead of locally installed Apache and PHP

Many web developers prefer installing a full LAMP stack on their local server, with Apache/MySQL and PHP installed on top of Linux. This is not a bad solution, but such a local installation is always going to be different from the client’s server environment. And in this case, the more differences, the more work and potential conflicts you will face, along with the “works for me” responses. :-)
Docker offers a nice solution to this issue, as it allows you to run identical server configurations in both development and production environments. However, the most crucial advantage of Docker is the fact that the developer is no longer required to manually configure all the .conf and .ini files. Thanks to Docker, you can focus on coding and leave all the server matters in the hands of experts.
At Droptica, we use a custom piece of software called docker-console, which allows our developers to quickly start a new or existing project in Drupal. Tools such as Composer, Drush, Sass/Compass are in their containers and they work without the need to install them locally on developer’s machine. Usually, they also have a range of tools for making debugging easier at their disposal. One of such tools is Mailcatcher, which catches all the e-mails sent by Drupal.

Nginx proxy for Docker

The nginx proxy image for Docker allows for using hosts (local domains) in order to display websites running on Docker in a web browser. In short, thanks to nginx proxy, we can type in http://www.droptica.dev instead of an IP address (for example: "172.17.0.4".) Nginx proxy is very useful when we are running a Drupal multisite and there are multiple domains under a single container’s IP address (e.g. sites/droptica.com, sites/droptica.pl).
Installing nginx proxy:
1. Before installation, make sure to remove all the existing versions of nginx proxy. Depending on the name, it is going to look more or less like:

docker stop ngnix-proxy && docker rm ngnix-proxy

2. Clone the repository: https://github.com/droptica/nginx-proxy 
3. Enter the repository directory and run it using the command:

docker-compose up -d

4. Check nginx IP, if the address changed, change it in the /etc/hosts file:

docker inspect --format
"{{ .NetworkSettings.IPAddress }}" nginx-proxy

5. If you want to add https for a xxx.dev domain, copy default.crt and default.key files to xxx.dev.crt and xxx.dev.key. It is possible that you will have to do chmod 777 on them and then restart the nginx container:

sudo chmod 777 -Rf certs && docker-compose restart

6. Add the code responsible for https to the configuration file (example for the xxx.dev domain):

if(strpos($_SERVER['SERVER_NAME'], 'xxx') !== FALSE) {
  $base_url = 'https://'.$_SERVER['SERVER_NAME'];
  $conf['https'] = TRUE;
}

7. When the machine runs something on port 80 (apache/nginx), comment the following lines in docker-compose.yml:

ports:
    - 80:80 
    - 443:443 

8. Docker compose version 2 and higher with nginx-proxy. On versions newer than 1, docker-compose sets private network for the containers, and because of that nginx-proxy cannot connect to it by default. In order to get it running, you have to find out the network and add it manually.

# list networks
docker network ls

# connect you nginx_proxy to your network
docker connect you_network_name nginx_proxy

PHP CodeSniffer

PHP CodeSniffer is a very useful tool, which helps you maintain clear codebase, conforming to standards. As you can read in the Readme file, CodeSniffer is made up of two scripts. One is used for detecting violations of a defined coding standard (phpcs), and the other is used to automatically correct coding standard violations (phpcbf). 
PHPStorm, however, only allows you to use the former one (phpcs). After configuration, all the lines containing code violating the standard will be highlighted in the currently edited file.
In order to be able to use PHP CS, you have to install it first, for example by using composer or in any other way described in the project’s readme file. https://github.com/squizlabs/PHP_CodeSniffer 
for instance:

composer global require "squizlabs/php_codesniffer=*"

If you did not add the $HOME/.composer/vendor/bin path to your $PATH variable, you should do it now. To do this, in the case of Linux, add the following line at the end of the ~/.bashrc file:

export PATH="$PATH:$HOME/.composer/vendor/bin"

In order to apply the changes, log out and log back in or execute the following command:

source ~/.bashrc

Another thing that you have to do is adding Drupal coding standards to PHP CS. Simply install the coder module - https://www.drupal.org/project/coder.
The easiest way to do it is by using composer:

composer global require drupal/coder

The detailed installation instructions can be found here: https://www.drupal.org/node/1419988 
Before you move on to the next step, make sure that there is no second instance of PHP CS installed anywhere in the system, you can do this by executing the following command:

whereis phpcs

It should return an output that is similar to the one below:

phpcs: /home/<username>/.composer/vendor/bin/phpcs

If the command returns more locations, you should get rid of the unnecessary versions, so that only one remains on your machine.
Then, register Drupal standards from the coder module:

phpcs --config-set installed_paths ~/.composer/vendor/drupal/coder/coder_sniffer

After installing PHP CS and Coder in the system, you can move on to configuring PHPStorm:
Settings -> Languages & Frameworks -> PHP -> Code Sniffer
In the “Development environment” section, click three dots next to the “Configuration” option.

PHPStorm window visible. There is box with "local" text inside and an arrow. Further right there is a button with three dots on it

In the Code Sniffer window, provide the path to the phpcs script (the one returned by the whereis phpcs command) in the “PHP Code Sniffer (phpcs) path” for the “Local” configuration.

A path to the "Local" configuration pasted in the box in the upper right corner of the window

After entering the path, click Validate in order to make sure that PHP CS works fine. If everything works, you should see the following message on a green background:

Validated file. The label "ok, PHP_CodeSniffer version 3.0.2 (stable) by Squiz (http://squiz.net) visible on the green background, as described in the text.
Then, turn on inspecting code by Code Sniffer. You can do it by going to the settings:
Settings -> Editor -> Inspections 
Select PHP from the list of languages, and then turn on
‘PHP Code Sniffer validation’. After ticking the checkbox, refresh the list of available coding standards A PHPStorm "reload icon" and then choose Drupal. 

A drop-down menu of described configuration visible. The cursor highlights Drupal among the others visible on the list
After applying the settings, you can open a PHP file and check how Code Sniffer works.

Xdebug (working on every project)

XDebug enables debugging web applications developed in PHP in a “classic” style, using breakpoints and running code line-by-line. XDebug is fully compatible with PHPStorm, and connecting the IDE to the debugger is very simple. 
Regardless of whether you use docker or set up the entire environment all by yourself, XDebug should broadcast information about the scripts on port 9000. In order to make PHPStorm listen to this port, click “Run -> PHPStorm "Start listening" icon Start listening for PHP Debug Connections”. After refreshing the debugged page in the editor, a window will open, confirming that the connection with XDebug has been successfully established. Sometimes it may be necessary to adjust directory mapping between the server’s webroot and project directory in PHPstorm.
If the connection was not established properly, first make sure that XDebug works at all (by running php --version or phpinfo()). Then check whether you need any bookmarklets (specially prepared links added to bookmarks) activating debugging. You can find them at https://www.jetbrains.com/phpstorm/marklets/ 
A very good and in-depth manual regarding connecting XDebug and PHPStorm is available here:
https://confluence.jetbrains.com/display/PhpStorm/Zero-configuration+Web+Application+Debugging+with+Xdebug+and+PhpStorm 

XDebug plug-in for Chrome/Firefox

There are many plug-ins available, just install it, enable it for a given page and enjoy the possibilities offered by XDebug.
Some examples:
Firefox: https://addons.mozilla.org/en-US/firefox/addon/xdebug-helper-for-firefox/ 
Chrome: https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc 

MySQL Workbench

A piece of software for managing MySQL databases. It allows you to import and export databases, view tables, as well as query databases, regardless of whether they are local, in docker or remote via ssh. It does not have any limits regarding the size of an imported database (compared to the default PHPMyAdmin configuration).  
The packages can be downloaded at https://dev.mysql.com/downloads/workbench/, after downloading just install them.

Chrome plug-in for JS debugging

The add-on is available for Chrome only:
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji 

Code formatting in PHPStorm:

Drupal has a very specific code formatting standards. Some of the most important things to remember are indent of two spaces, as well as putting else/elseif/catch/while always in a new line. PHPStorm is compatible with Drupal out of the box. 
Simply go to Settings -> Editor -> Code Style -> PHP and select Set From -> Predefined Style -> Drupal. Do not forget about formatting settings for CSS, JS, SASS/LESS.

Drupal Coding standards chosen in PHPStorm settings

Additional PHPStorm configuration

Below you can find some additional PHPStorm configuration options, which also make your work easier by automatically formatting your code according to the accepted standards:
Automatically adding an empty line at the end of the file when saving: 
Settings -> Editor -> General, select Ensure line feed at file end on Save
Automatically removing white spaces at the end of the lines when saving the file.
Settings -> Editor -> General, Strip trailing spaces on Save, select ‘All’. 
You can also choose ‘Modified Lines’ if you do not want white spaces to be removed from other places in the code, which were not modified.
Automatically formatting the code after typing in the closing curly bracket.
Settings -> Editor -> General -> Smart Keys, select Reformat block on typing '}'

Summary

The above article features our current recommendations. They are different now from what we recommended a year or two ago, and they will probably be different in the future – the configuration will get even better. :)
Is there anything that we should improve in your opinion? Perhaps you have your own way to configure your development environment? Share your insights and ideas in the comments!

Jan 09 2018
Jan 09
Another year is over, and we are glad to acknowledge that we are very proud of what happened during this period! In short, 2017 was the best year in the company’s five-year history. That is why we decided to share a brief summary of the year with you. See what we achieved over the last 12 months and what we have in store for 2018.    Reasons to be proud

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