Jan 14 2020
Jan 14

It’s really awkward when our clients or prospects ask: “Why do you suggest moving to Drupal 8 while it’s about to reach the end of life as well as Drupal 7? I’m not buying this.”

Well, first of all, Drupal 7 is not going to be abandoned - it will be set for the Drupal 7 Vendor Extended Support at least for 3 years.

As for Drupal 8, its last minor release (8.9) will be put for the LTS program from June 2020 until the end of life in November 2021. Also, this very last release will be the basis for Drupal 9.0. 

So let’s check out why we think it’s high time for Drupal 7 update that we all love. 

Updated Drupal 8 means being Drupal 9-ready

Staying on Drupal 7 means the necessity to execute a migration to Drupal 9. Moving from Drupal 8 to Drupal 9 will look like a minor website update that you usually do in less than a day.

Limited Drupal 7 support

Drupal 7 will be supported by vendors (not by the Drupal Security Team nor the Drupal Core team) at least until 2024. 

What this support means:

  1. No more core commits 
  2. Features development on-demand only
  3. No community support at large when it comes to massive bug fixing, documentation writing

Besides, it’s supposed to be a bad practice to use unsupported software due to security issues. 

No new Drupal 7 websites will appear as well: this point should be taken into account by the dev teams who maintain some specific Drupal 7 solutions.

Drupal 8 utilizes a widespread tech stack and approaches

Drupal 8 has a tech stack that allows more developers to embrace this CMS.

  1. Symfony components
  2. Twig -” the flexible, fast, and secure template engine for PHP” as it’s described on the official website
  3. OOP approach
  4. Composer support
  5. RESTful Web Services

Drupal 8 is more secure and has minor releases more often

Drupal 8 has a minor release once in 6 months which is quite nice: the new functionality can be added to the core more frequently. For example, these features were added within minor Drupal 8 releases (ask your developers why these features are cool):

  • Media (standardized and improved media management)
  • Workflows and Content Moderation
  • Layout Builder (page layout management and the possibility to add different elements and blocks through UI and drag-n-drop)
  • BigPipe for better performance

Also, the patch releases provide consistent secure updates, bug fixes and peace of mind.

Drupal 8 is feature-rich

One might think that migration is just an act of creating a hassle for no reason. Say, a website works well, the workflow is okay, and web developers always find a way out. 

Cutting the costs on web development also throws you back on your way to improvement. You won’t pay more for development but you also won’t earn more money with the help of your website.

These features in Drupal 8 will ease website development and management:

  1. New editor convenient for non-tech managers
  2. Quick Edit right on the page
  3. Drupal 8 is mobile-friendly out of the box
  4. Responsive images
  5. Better accessibility (which is trending now)
  6. The better multilingual feature implementation and its support
  7. Built-in Web Services: RESTful Web Services and JSON API out-of-the-box. All of this opens the world of the Internet of things (the devices that can be connected and communicate some data to each other), mobile apps and multi-channel integrations (PC, TV, tablets, etc), internal services and so on.
  8. The decoupled approach allowed out-of-the-box, including the static websites generator Gatsby
  9. The convenient migration tool Migrate API will ease the migration from Drupal 6 and Drupal 7. Also, there are tools that allow migrating from Wordpress.
    It’s worth saying that now popular contributed modules have stable Drupal 8 versions and that significantly reduces the migration effort. 
    When it comes to Drupal 9, in April 2019 46% of contributed modules were ready for Drupal 9, states Dwayne McDaniel from Pantheon.

There are big changes (planned) for new Drupal versions

Below are just a few things that are already in progress or planned for the nearest future.

  • New admin user interface managed by a React application
  • The API-First initiative
  • New Configuration Management
  • Content workflow improvement
  • Further improvements for Media management
  • Automatic updates for Drupal websites (!)

Are you ready for the big changes already? Invest, not cut costs - it will pay off. 

Useful links

7 reasons to migrate to Drupal 8 (and don’t wait for Drupal 9)

Why migrate from Drupal 6 to Drupal 8

Nov 25 2019
Nov 25

Why don’t wait for Drupal 9 and migrate from Drupal 6 to Drupal 8

So why it’s worth migration to Drupal 8?

The Drupal 6 core

Drupal 6 Core is no longer supported by the Drupal Security Team, only by 2 vendors. Now one of those vendors promises that this LTS (Long-Term Support) will last up to 2022.

Drupal 6 will live for a while, that’s true. But the overall update process in Drupal 6 is much harder in comparison to the supported versions: the vendors and website owners have to manually patch the modules and the core if they pursue security.

The PHP versions compatible with Drupal

There’s the possibility that some Drupal 6 websites run on PHP 5.x that is no longer supported since January 1, 2019. Consequently, no more security fixes for PHP 5.x.

In spite of the fact that Drupal 6 LTS vendors support PHP 7.1+, it’s still red tape to run Drupal 6 with these PHP versions. 

Also, a number of Drupal 6 contributed modules working with PHP 7.1+ is strictly limited.

Drupal 6 security

Sometimes Drupal 6 gets the security updates with a delay. In many cases, it happens due to the backport issue. In a nutshell, when one detects a problem with supported versions of Drupal Core (Drupal 7 and Drupal 8 at the moment) or its modules, a solution usually requires the backport to Drupal 6.

But to tell the truth, it’s not only that all Drupal 6 fixes should be backported. Sometimes it’s just Drupal 6 only problem.

Drupal 6 limited functionality

We can recall just few cases when Drupal 6 got bug fixes; mainly the support is about security fixes.

Also, no new features are expected for the Drupal 6 core and modules.

Drupal 8 is the feature-rich version

It’s no secret that Drupal changes from version to version. Drupal 8 offers things that Drupal 6 and Drupal 7 don’t have: RESTful Web Services and JSON API out-of-the-box allow implementing the Decoupled approach, it’s mobile-friendly out-of-the-box and has better accessibility, there’s a better solution for multilingual websites.

Due to the new release cycle, new featured are added to the Drupal core much faster than ever before.

For those who love and dig tech things: there are new features like the WYSIWYG editor, new field types, and besides, Drupal 8 has a better technical stack. Symfony components, Twig, OOP, Composer. 

Drupal 6 is not about convenient workflow anymore

Drupal developers get worried about working with unsupported versions. It’s both a waste of time and money since there is a lot of overheads connected with Drupal 6 development. We mentioned some of them above.

Drupal 6 support is not cheap

One more reason why we consider the Drupal 6 upgrade to 8 - money matters.

The annual support of a Drupal 6 website is somewhat costly (that’s relevant for rather big business websites like corporate websites with lots of lead-catching features, e-commerce and enterprise ones). Check how much you spend on your Drupal 6 site: probably you’re spending too much on it.

If you’re interested, we did some math here: check Why migrate your website to Drupal page.

For all the other questions - fill out our contact form and we will revert to you within a business day.

Nov 12 2019
Nov 12

Why migrate to Drupal 8

As you might already have understood, we’re in the team “Migrate to Drupal 8 as soon as possible”. We find it’s rather profitable from the business perspective and wise and time-savvy from the technical point of view. So why we preach moving to Drupal 8 to all Drupal 6 and Drupal 7 websites' owners?

Reason 1 - the obvious one

Drupal 9.0.0 will be based on the last Drupal 8 version. What does it mean for a Drupal website owner? 

In terms of development effort: the upgrade to Drupal 9 for Drupal 8 websites' owners will be as easy as the upgrade to a minor Drupal release. 

Let me explain. There are major Drupal versions - 6, 7, 8. They differ significantly. Within the major versions, there are minor versions (Drupal 8.5, Drupal 8.6, etc) that are being released to introduce some new features.

You need less than a day to upgrade to the minor version while the migration to the major one can take months.

In terms of money: since the upgrade from Drupal 8 to Drupal 9 will take less time, it will take less money either. So allocate some money for the migration to Drupal 8 for 2020.

Reason 2 - for those who want to avoid hustle with old versions' support

Both Drupal 7 and Drupal 8 will reach the end of life in November 2021. That means the official Drupal Security Team won’t maintain these versions anymore and it won’t be in charge of keeping them secure. You must find someone who will at least support your website’s security so it doesn't get hacked.

Having your website on Drupal 8 already, you’ll just take a nice relaxed stroll and migrate to Drupal 9 once it has a stable release.

Reason 3 - for Drupal 6 websites’ owners

Drupal 6 websites are quite vulnerable ones and we would advise moving to Drupal 8 as soon as possible even if Drupal 9 wasn’t about to be released.

Here’s why.

  • No more features and improvements for Drupal 6. This version is literally stalled and it does the same to your business.
  • The patches to Drupal 6 are mainly about security. Bug fixes are unlikely.
  • Drupal 8 is more convenient for developers and easier in terms of development.

Reason 4 - for Drupal 7 websites’ owners

  • Drupal 7 doesn’t allow using the Decoupled Drupal approach out-of-the-box, so forget about things like Gatsby. The significant resources and contributed modules are required to make it work.
  • As the developers are focused on Drupal 8, it’s unlikely that Drupal 7 will have new features.
Oct 08 2019
Oct 08

We keep pushing the Drupal adoption in our city at GTD. This event was under the “Star Wars” topic.  All participants have learned how to create a website on the Drupal platform and have created a module that calculates the winner in the battle.

This time we added a little bit of gamification to make a process of site-building more interesting. There was a competition between the teams and three of the quickest got presents from our company!

We thank all guests for participation. See you soon! 



Sep 24 2019
Sep 24


E-learning boom is gaining momentum. That can be explained not only by the convenience of use but also by the low cost. Many businesses that are interested in developing employees can save a lot of money by implementing e-learning instead of offline learning. Besides, according to SHIFT, 42% of companies say that implementing e-learning has lead to a revenue increase. 

This article will show you why you should use Drupal for creating an e-learning platform. 

Drupal Learning Management System (LMS)

Take a quick read about Drupal advantages. 

Remember, online learning platforms for businesses should be specialized on the company’s goals and should fulfill employees' needs. For example, you need to increase sales, but some sales employees don’t possess the necessary knowledge. That means you need to provide a course where the employees will learn this information. It’s also possible to create a course not only providing knowledge but also for training existing skills.

Here are some tips the company can use while providing an educational course to the employees:

  • Use blended learning. Don’t concentrate only on a specific way of producing materials for studying. Drupal allows mixing learning tools by using video, texts, flashcards, etc. because it has video-based modules, gaming and gamification content, scenario-based learning, microlearning modules, multilingual courses, images, and infographics.

  • Create learning paths. Tracking different participants' ways of learning teaches to allocate some problems which need to be cut out or improvements that need to be made. For example, if your employee doesn’t know how to prioritize everyday tasks to achieve a company goal, an e-learning platform should train the employee on how to do it. 

  • Reward and recognize training achievements. Even on e-learning platforms, rewards motivate for studying. Here is a tip. Make a microsystem of students where they can act as experts and students at the same time. Some students can help others by correcting their answers and for these corrections receive a nomination like “the best correction”, “the best mentor”, “the best-provided information”. Such gamification increases engagement.

  • Ask your employees what they need is the easiest way to engage employees in corporate learning and make the learning effective. The thing is, the revenue generated per employee is 26 % bigger for companies that offer e-learning, according to Topyx.

Drupal modules and profiles for e-learning

First, define a company’s e-learning goal, then choose a realization tool. It can be a profile or a combination of modules. We made a review of Drupal modules and profiles which can be used for e-learning goals. Take a read and choose the best for the company.

  1. Opingo
    The Opingo profile includes the flexible access system based on such roles as a student, teacher, coach, administrator, etc. It has the Theory and Quiz modules to create engaging and interactive content. Opingo has adaptive learning path management, where training materials can be adapted to every student according to his/her previous achievements and some conditional rules. There is a module that manages virtual classroom sessions and allows to implement Instructor-led sessions.
    One of the Opingo advantages is the implemented certificate module. If a student successfully completes the training, a PDF certificate is automatically generated. The e-learning platform is more valuable when it provides students with certificates.

  2. Open Academy
    This is a Drupal distribution that brings the best in web publishing for higher education on a customizable Drupal platform. It’s designed to provide academic departments in higher education with a ready to use website. It has sections for courses, news, people, events, and publications. Recent news, events, and publications are listed on the main page. Open Academy is easy in use because of design simplicity. Besides, most academic department's needs are well accomplished there.

  3. Julio
    Julio is a distribution targeted for schools, school districts, small colleges, and academic departments within universities. There are sections about faculty and staff, students’ life, academics, admissions, parents and guardians, and sports. Empowered persons can create announcements, events, galleries, and group posts in all sections except for the faculty and staff.

  4. Course
    The Application Programming Interface (API) in the Course helps to allocate goals which can be added to the employee’s workflow.
    There is a possibility to use objects which will be marked as graded or ungraded course objects. Also, the Course provides a framework for external learning application integration.

  5. Room Reservations
    This module is created for managing study rooms being used while learning.

  6. Quiz
    The Quiz module in Drupal allows building graded analytics, the results can be displayed after and during the quiz.
    It’s an effective way to track a student’s progress because it’s easy to analyze. The students are able to see their improvement and also to receive feedback from an administrator. This module also includes the certificate module. Read about 10 Drupal modules for quizzes.

  7. User Progress API
    The User progress API module was sponsored by Pennsylvania State University. It has been developed for charting students’ progression throughout a system. 

  8. Badges
    The digital badging Drupal module helps provide a visual demonstration of an achievement to enhance accomplishment in the eyes of the student as well as college admission officers.
    Such digital images as badges help to recognize learner’s skills and achievements. That type of visualization gives an opportunity for the student to actually feel improvement during studying.  

  9. Certificate
    The Certificate module creates and awards PDF certificates using tokenized HTML templates.

  10. H5P - Create and Share Rich Content and Applications
    This module is an authoring tool for rich content - you can create interactive videos, flashcards, board games, etc. Besides, H5P also enables your site to import and export H5P files. H5P files are package files for HTML5 content and applications. You can easily upload them to your Drupal site and publish rich Internet content and applications. 

  11. Social learning/Messageboards
    Communication between students matters, it’s like at university. The Social login and Social share Drupal modules allow to log in using the social network sites, which also helps in sharing the content with the student’s network.
    You can also read about 10 Drupal modules for communication with users and 10 free Drupal modules for integration with Social Media

While providing an e-learning platform to your employees, don’t forget that a company learning management system should be well-designed, otherwise, all good intentions will sink in the “failed user's experience” sea.  

Also, guarantee consistent instructor presence at the platform. Two types of problems will be solved by doing this. First, it will be easy to ask some appearing technical questions, therefore studying will go faster. Second, when a lack of motivation captures some students, there is an opportunity to address the instructor for motivation.

Sep 03 2019
Sep 03

The ADCI team keeps the tradition of organizing Drupal Cafe. It’s a great opportunity for networking, learning new information and improving competence. Drupal Cafe celebrated its round anniversary! We organized the 20th event, where we kept sticking to our high standards of sessions' quality.  

5 speakers told us about:

  1. Data science. The influence of mathematical, philosophical phycological problems during constructing Artificial Intelligence models.

  2. Drupal components. How a component approach to front-end developing helps to improve relationships between front- and back-end developers.

  3. React/Redux apps unit tests - effective approaches and cases.

  4. How to solve the tasks that suck: tips which help to save work time and be effective.

  5. How not to burn out. How to keep a healthy attitude to the work and refill your resources.

Many Q&A after each lection tell us about what smart and engaged audiences attend our events.

Sep 03 2019
Sep 03


The Drupal CMS is one of the most secure CMSs.

Advantage: the Drupal security team constantly tests the performance of new modules and helps developers to fix errors in the code.

Note: Drupal is used to host government websites such as a website of the Prime Minister of Canada or a website of the French government.

System update


A WP system update can be done in a few clicks from the WordPress control panels. 

Advantage: the massive WP community will help to resolve any issue.


An update of this system can be difficult if you are not a website developer. 

Note: You will not be able to update Drupal from the user interface, you will have to find a professional specialist for help.

What kind of websites can be made on each platform


Personal branding websites, websites for freelancers and bloggers, small businesses, consulting services (finance, marketing, advertisement), etc. 


Digital service providers, travel and tourism websites, websites for creative agencies, educational websites and e-learning platforms, governmental websites, news and entertainment websites, healthcare websites.  

Here is a tip! Make sure you know the exact goals of your business website, learn essential information about platforms under consideration, and then make a decision which platform to use.


Drupal is a multifunctional and secure CMS. It is translated into 110 languages ​​and allows you to implement any project you may think of. E-commerce websites, social networks, large corporate sites have been successfully created on Drupal. Drupal was created by professionals for professionals. You can create large projects with a unique set of functions, but you will have to spend time learning or finding a web developer for help. 

If you don’t want to waste time learning, WordPress will be the best choice for building your first website. The WordPress platform is available for users with any level of knowledge. Just find the right combination of plugins, choose a theme and high-quality hosting, then you can create large and customizable websites, but do not forget about security, especially if you plan to create a website for your business.

To learn more about Drupal, we recommend you to read Why you should migrate your site to Drupal


Liked the article? Twit @adcisolutions and let us know what you think about this article on Twitter.  

Aug 26 2019
Aug 26

The Drupal CMS is a universal platform for website development. It is equally suitable for small business websites and complex e-commerce solutions. This article will tell you about the price formation of Drupal website development and answer the question “How much does it cost to build a website?”.

Website design

First of all, you need to understand what goals and objectives you set for your website. For example, you need a website for your blog with a standard set of features and simple design. Such a Drupal website can be created by yourself absolutely free. Just read a guide or watch tutorial videos. 

Another matter, if you need to develop a selling promotional website for your business with a custom design, it is a serious step that you will have to spend money on. It’s no secret to anyone that websites with a unique design increase sales (according to “The business value of design” by McKinsey). A professional web designer can help you to develop a custom design for your project, but that's not all. Also, you will need a front-end developer to run your website with a new design. Of course, if you have some extra money and your time is too expensive, you can hire a project manager who will monitor the progress of the project, but it’s not neсessary.

Drupal development

Every Drupal website contains Drupal modules. Drupal modules allow you to add the necessary features to your website and you can install them for free. But every business is unique and sometimes a standard set of features is not enough to implement a project, that's why the development of additional Drupal modules is required. To do this, you need an experienced Drupal development team. Below you can look at average hourly rates for mid-level developers.

  • North America: $60-$140 per hour

  • Western Europe: $40-$60 per hour

  • Eastern Europe: $20-$40 per hour

  • Asia and Pacific: $10-$20 per hour

As you can see, the per-hour rate can vary dramatically based on a region of the world, that’s why companies prefer to work with outsource web development firms from different countries. 

Website development cost

Mainly, the cost of a website is calculated based on an hourly rate multiplied by a number of hours spent on a project. 

The website development cost directly depends on the features that you need and on the complexity of website design. Below, you’ll find some examples of the existing types of sites and see how long it takes to develop a website, based on our experience.

Simple promo page

If you need an opportunity to edit the content of your promo page by yourself, the Drupal CMS will be the best solution. The development of a simple promo page will take 50-70 hours.

Approximate total cost:

  • North America: $4200-$9800 

  • Western Europe: $2000-$4200 

  • Eastern Europe: $1000-$2800 

  • Asia and Pacific: $500-$1400 

Company website

The development of creative custom design is very important for corporate websites because the reputation of your company will directly depend on this. Development of a standard corporate website with such sections as "About Us", "Services", "Portfolio", "News", "Blog", "Contacts" will take 200-250 hours.

Approximate total cost:

  • North America: $15000-$35000 

  • Western Europe: $8000-$15000 

  • Eastern Europe: $4000-$10000 

  • Asia and Pacific: $2000-$5000 

Mobile app

Drupal is universal. It suits not only the websites’ development, but it can also be used for the back-end development of mobile applications. This fact makes Drupal even more attractive for your choice. The minimum estimated time for the back-end run on Drupal is 150-200 hours.

Approximate total cost:

  • North America: $9000-$28000 

  • Western Europe: $6000-$12000 

  • Eastern Europe: $3000-$8000 

  • Asia and Pacific: $1500-$4000 


E-commerce websites are online stores and large trading platforms, such as Amazon. Perhaps, the most difficult type of projects to implement, so the time which will be needed for an e-commerce website development is appropriate. The minimum estimated time is 250-300 hours.

Approximate total cost:

  • North America: $15000-$42000 

  • Western Europe: $10000-$18000 

  • Eastern Europe: $5000-$12000 

  • Asia and Pacific: $2500-$6000 


In this article, we gave you approximate costs for different kinds of websites and now you have an idea of how the price is calculated.

Remember, that price for website development entirely depends on a development team and your requirements. It is very important to find the experienced development team to achieve excellent results in your project. And don't forget that every business is unique and requires individual solutions.

Liked the article? Twit @adcisolutions and let us know what you think about this article on Twitter.
Jun 24 2019
Jun 24


Hi, I am Artem and I am front-end developer. In my everyday work, I face with the styling of Drupal sites.

In this article, I am going to share my experience in integrating dynamic imports, splitting code into small chunks in Drupal 8. Also, I am going to show you how to write a webpack plugin that automatically connects these chunks with Drupal. With this plugin, you will not worry about the new chunk that needs to be connected, whether it is some js module or a piece of CSS.

What you need for comfortable usage of sites

When you open a web page, you definitely pay attention to its loading speed. Of course, no one wants to look at a blank page that is going to show you a super design with interesting animations but it takes ages to load. There can be many reasons for the long loading and not all of them are directly related to the size of the code that the browser is trying to load and execute. But the size of a bundle still plays a big role, especially with the advent of http2, where the main emphasis is put on speeding up multi-threaded loading of small packages.

So how can we deliver the code to the browser as efficiently as possible so that it does not overload and does not get anything else instead of the desired content? Try to answer this question by considering the chunks and dynamic imports solution.

Chunks and dynamic imports in Drupal

What we mean by “Chunks and dynamic imports”: it is splitting one large piece into smaller ones and having them lazy loaded if needed. Let's see how it can be implemented in Drupal 8 with examples.

I decided to keep up with the trends in our beloved front end world and write a config for the webpack dividing our bundle into two, to begin with: one for the Browser-That-Must-Not-Be-Named, the other for modern browsers that support all the main features of ES6 without compiling. 

Apr 24 2019
Apr 24

The 20th and 21st April’s weekends were very long-awaited by ADCI Solutions because of the Global Training Day (GTD) event in our office.

ADCI Solutions is a permanent organizer of GTD in Omsk city. Twice a year we invitе tech students, web developers newbies to ADCI Events Hub to share different reports about web development and our experience. We try to make our sessions interesting and funny, it makes reports easy to understand for every conference’s participant. So, don’t be shy and be with us at our next event. 

It’s funny that Global Training Day isn’t a day, it’s two days. On the first day, professionals from ADCI Solutions told about the back end, front end, web design, and project management. The second day is a day of practice. We suggest our attendees create websites and modules by themselves. 

The first day consisted of four reports:

  1. Sergey Sergeyev “How it’s made? Product development”
  2. Denis Golubev “Lord of pixels. Starter pack”
  3. Alexander Shmakov “Back end - it is easy”
  4. Maxim Luckyanchikov “May the force be with you…or how to be a front-end Jedi” 

To immerse our guests in web development company’s work, we decided to start our reports talking about our everyday processes. Sergey Sergeev spoke about how dev teams make web products, what the roles there are in the development processes, and what interactions with clients are like.  

The second report was focused on web design. Our head of design department Denis Golubev spoke about how to become a web designer. Denis shared the most popular and modern tools that can help web designers to create a masterpiece. Also, Denis told about how to create your own portfolio and how to get your first project.

Alexander Smakov is the ADCI Solutions company’s back-end developer and he spoke about why the back end is a great choice, what its nitty-gritty is. He told in detail what the back end’s role in website functioning is.  

The last report was about the front end and what a good front-end developer should know. Maxim Luckyanchikov spoke about basic tools that the front-end developer should own, he shared his own experience and gave advice to beginners. Maxim revealed the secret that his favorite framework is Vanilla JS.

Traditionally, we finished the first conference’s day with a joint photo, find it below.

On the second day, the attendees developed their own websites and modules on the Drupal CMS. Our professionals were mentors for beginners, they helped and answered the questions.  

On the first and second days, we had pizza and coffee breaks, it’s a good opportunity to snack and make new acquaintances. Also, we made a prizes draw: a certificate from a school of foreign languages and our signature sticker packs.

It is important to note, that on GTD we used our new service Survey which let us know what participants think about reports and event organization. We believe that our efforts provided useful tools for beginners, answered all the questions they had. We are sure that conferences like GTD help all newbies to find the right way on the web development area. 

Feb 26 2019
Feb 26

This is an addition to the Bibliography & Citation module (BibCite), which enables users to automatically prepopulate bibliographic references data by entering DOI (Digital object identifier).

Let us remind you what bibliography and citation are. A bibliography is a list of all of the sources you have used (whether referenced or not) in the process of researching your work.
A citation is a borrowing of a text fragment, formulas, provisions, illustrations, tables, and other elements of the author. Also, the citation is a non-literal, translated or paraphrased reproduction of a fragment of text, an analysis of the content of other publications in the text of the work.

The Bibliography & Citation - Crossref module’s purpose is to save time and make the process of adding information easy and convenient for admins. With this module, the website’s admins shouldn’t search and write by themselves: 

  • the authors' names
  • the titles of the works
  • the names and locations of the companies that published your copies of the sources
  • the dates your copies were published
  • the page numbers of your sources in special fields.

Everything will be filled out automatically. The only thing admins need to know and write is DOI (Digital object identifier) of books, conference proceedings, articles, working papers, technical reports.

DOI is a modern standard for designating the provision of information on the Internet, used by all major international scientific organizations and publishing houses. 

DOI is unique words and numbers consisting of two parts - prefix and suffix. For example, 12.3456/789; here 12.3456 is a prefix and a publisher id (12 is an identifier tag, 3456 is a line pointing to a publisher).
789 - suffix, it is an object identifier pointing to a specific object.

The full information about the BibCite module created by ADCI Solutions you can find in this case study.

You can download for using the Bibliography & Citation - Crossref and the Bibliography & Citation module on drupal.org website.

Jan 23 2019
Jan 23

The concept of the Internet of things is a trending topic and it has found implementation in numerous aspects. Computers, laptops, mobile phones, and other non-internet-enabled physical devices like cars, or smart grids can interact with each other. To do it they need a standardized interface called API (application programming interface). The advantage of using a unified interface is once you implement such a web service on your server, it can interact with a variety of client devices. In addition, it gives the ability to build a web application with separate back-end and front-end parts. You may use modern JS frameworks to make user interfaces more dynamic and achieve good UX. Many organizations integrate their mobile applications with back-end CRM, ERP, EAM, and other tools to improve their productivity.

We considered how to create API using the headless Drupal 8 approach in our previous articles, find them in the Useful links block. However, the functionality of a CMS may not have enough flexibility for the projects with complex business logic. In such cases, using a PHP framework may become a more preferable option. 

Symfony is one of the most popular Open Source PHP frameworks consisting of separate components. They are used in many large projects, such as Drupal 8 or Laravel. Symfony has an active community and stable support. Also, it has the expandable architecture of reusable components called “bundle”, it extends the functionality of the framework. The latest Symfony version has a lot of improvements, such an automatic configuration of bundles with Symfony Flex and simplified folder structure increase the speed of development.

In this Symfony 4 tutorial, we will create a basic server back-end structure for your application using the REST API architecture style. We will use a 'FOSRestBundle' bundle as a basis, implement 'get' and 'post' methods to create and show the list of resources respectively. Besides that, we will add the OAuth2 authentication with FOSOAuthServerBundle.

Create a Rest API

Firstly, make sure you have installed PHP 7.1 or a higher version and the Composer package manager to create a new Symfony application. After that, create a new project by executing the following command in the terminal:

Sep 19 2018
Sep 19

Here are some insights which were shared during the Dries’ session:

  • Drupal 9 will be released in 2020.
  • The next DrupalCon Europe will be held in Amsterdam 28 Oct - 1 Nov 2019.
  • Drupal became the fastest technology to install! Before it took 20+ clicks and 15 minutes but now you do only 3 clicks and spend 1.27 minutes! You may find a table of full comparison with other technologies on a slide in the gallery.
  • Dries also spoke about the Javascript Modernization initiative. Now the Drupal Community is trying to build a bridge to the JavaScript Community and modernize Drupal through API-first and JavaScript.

In the gallery below, you may see a full list of initiatives which will be implemented into practice soon.

Also, It was incredible to be among the top 30 companies which did the most of all contributions to the development of the Drupal CMS.

One more event which our team members had an honor to visit was Round Table with Dries and other partners and supports. There were a big number of business owners and representatives of different Drupal companies.

A variety of questions were discussed there. The main ones were: how to compete with other CMSs and how to promote Drupal. It was an almost two-hour discourse where everybody could tell about problems that Drupal has and suggest solutions.

The ADCI Solutions team wasn’t only a listener but had prepared our own activities: BoF on Drupal marketing and a session “How to boost your team members performance”.

There was a dynamic discussion at BoF. All places were taken and we were happy to see so many people who feel passionately about Drupal promotion as we do. A lot of Drupalers joined us and it was great to hear a big number of ideas, life hacks, and thoughts from people working with this CMS in different countries.

The main points which were touched during BoF were Drupal positioning, competition with other CMSs and between different Drupal companies, how to explain what Drupal is to non-tech people, and how to hire a Drupal prof.

The BoF’s participants determined the primary advantages of the Drupal CMS:

  • It allows you to see a result right away.
  • It is powerful and fast, as well as completely suitable for content-heavy projects.
  • It is an open source technology.
  • It is the best variant if you need a long-term solution because Drupal is highly scalable. You can change it in the future when your business is bigger.
Sep 11 2018
Sep 11

But there is one more point. What for we do all of it? We will list the main reasons for holding such an event.

Firstly, an educational conference helps to grow professionals. You can train your future employee or find somebody who will satisfy all your work demands.

Secondly, it will help you in building and developing your HR brand. Web developers and newcomers will know your company as a highly attractive place for work. It guarantees a constant flow of great staff to you.

Thirdly, Drupal Global Training Day is an amazing possibility to tell people about the Drupal CMS, show them its advantages, and explain how to work with this technology. We boost the Drupal adoption and increase the awareness of this brand. What’s even better, we see the result of our efforts: the beginners’ interest in Drupal.

Finally, we can pass on the tips and tricks which will help you to organize GTD in your country. Some of them can be obvious but they are essential.

  1. Get in touch with other GTD organizers. They can provide you with advice, info, and even some documentation which will help you to hold GTD.

  2. If there is an active Drupal community in your country, find Drupal enthusiasts who are ready to tell about their expertise at GTD.  

  3. Ask your team members if they want to prepare a report.

  4. When you choose speakers and report’s topics, don’t forget about the knowledge level of your attendees. For example, if they are beginners, don’t tell them about Headless Drupal, it is too complicated.

  5. Invite participants who are interested in web development and the Drupal CMS. It can be students of a computer department.

  6. Don’t hold more than 4-5 reports. It will be awesome if you find so many speakers but you should remember that it is hard to absorb a lot of information in a single shot.

  7. Make a coffee-break. It will help your attendees to understand all reports better and discuss them with each other.

  8. If you want to teach your attendees some practical aspects, try to organize such a workshop for them the next day.

Now you know everything: what our GTD 7 was like, why we (and other companies) do it, and even learn tips on holding your own event.

We wish you good luck! 

Check the photos in the gallery below.

Aug 17 2018
Aug 17

It feels fantastic when your work gets recognition! And we know what we are talking about.

The ADCI Solutions’ Drupal and Vue.js project got 7 (and 0.09!) points at Awwwards. You know, it is one of the most respectable rankings for web design and web development agencies. During the voting, 4 criteria are taken into account: project's content, design, usability, and creativity.

Our project wasn’t created especially for this competition or for a portfolio. And what is even more remarkable, it's not a typical creative agency website listed at Awwwards.

We made it for one of our client - a hurricane and security shutter manufacturer Alutech United Inc. They let our imagination run wild and we played with the design and chose an atypical concept.

We hope that our project will give an inspiration to web design and development professionals all over the world.

It is our first experience of taking part in such competitions, and we were on the edge of our seat right from the beginning. We want to say thanks to all who evaluated our work with credits, these 7 points have become a great start.

Aug 07 2018
Aug 07
 "id": "backstop_default",
 "viewports": [
     "label": "phone",
     "width": 320,
     "height": 480
     "label": "tablet",
     "width": 1024,
     "height": 768
 "onBeforeScript": "puppet/onBefore.js",
 "onReadyScript": "puppet/onReady.js",
 "scenarios": [
     "label": "BackstopJS Homepage",
     "cookiePath": "backstop_data/engine_scripts/cookies.json",
     "url": "https://garris.github.io/BackstopJS/",
     "referenceUrl": "",
     "readyEvent": "",
     "readySelector": "",
     "delay": 0,
     "hideSelectors": [],
     "removeSelectors": [],
     "hoverSelector": "",
     "clickSelector": "",
     "postInteractionWait": 0,
     "selectors": [],
     "selectorExpansion": true,
     "expect": 0,
     "misMatchThreshold" : 0.1,
     "requireSameDimensions": true
 "paths": {
   "bitmaps_reference": "backstop_data/bitmaps_reference",
   "bitmaps_test": "backstop_data/bitmaps_test",
   "engine_scripts": "backstop_data/engine_scripts",
   "html_report": "backstop_data/html_report",
   "ci_report": "backstop_data/ci_report"
 "report": ["browser"],
 "engine": "puppeteer",
 "engineOptions": {
   "args": ["--no-sandbox"]
 "asyncCaptureLimit": 5,
 "asyncCompareLimit": 50,
 "debug": false,
 "debugWindow": false
Jun 28 2018
Jun 28

Our formal recognition by Clutch is the direct result of those clients who took the time to interview with the firm in order to provide feedback based on the tasks accomplished alongside us. Here’s what a couple of ADCI Solutions’ clients had to say about their experiences:

“ADCI has a proven track record of consistency and responsiveness. Their developers are talented, driven, and dedicated to customer satisfaction.”

“ADCI continues to prove themselves a talented, professional, and affordable partner. Their budget and timeline estimates are remarkably accurate.”

“The enhanced product now includes more robust coding and reliable quality, thanks to ADCI Solutions’ existing proficiencies and eagerness to develop their skills even further. Their responsiveness, reasonable pricing, and ability to exceed expectations earned top marks across the board.”

We would like to reach out and thank our amazing clients who took the time to review us on Clutch. Thanks to their feedback, ADCI Solutions is also recognized as a top web development company in Russia by Clutch’s sister website, The Manifest.

Jun 19 2018
Jun 19


University websites need rich functionality. Often, they consist of a lot of pages with different types of content. It can be some lists of students, courses, books, a schedule of university events, just news, or a long-form article.  We will present you the list of Drupal modules you can add to your university’s site and get advanced opportunities to manage users’ data. Here they are. 


This module is a core which has narrow functionality itself but it provides flexible building blocks and APIs to create a custom e-learning system. Besides, Opigno has a lot of additional modules and you may choose the most suitable set of them corresponding to your expectations and goals. It means that companies are allowed to build their own simple solutions reducing the time of their creation. 

If you want to test and evaluate the Opigno module you may use their profile which provides a basic configuration. You won’t need a broad working knowledge of the Drupal 7 system for checking it. 

Room Reservations

The Room Reservations module was developed specifically for universities’ websites which need to manage the access to their study rooms and the use of them.
You may set it up according to your requirements and put a reservation system together in a short time. 

Bibliography & Citation

Bibliography & Citation allows keeping, outputting, exporting, and importing bibliographic data. Also, it has related modules which expand the BibCite possibilities: 

Bibliography & Citation - Migrate - migrate your bibliographic data from the Bibliography (biblio) module.

Bibliography & Citation - Altmetric - adds the Altmetric badges to BibCite reference entities. It allows you to display the mentions of your content on various social networks or different sites.

Google Scholar - provides the number of meta tags to help with
indexing of scholarly content/articles in Google Scholar.

User Progress API

The User progress API module was sponsored by the Pennsylvania State University. It has been developed for charting students’ progression throughout a system. 

In addition, this project provides views integration. It means that you can look through all collected data or export this information to any format you want. 


E-learning is one of the most suitable modules for online interactive courses for students. One of the features of the E-learning module is tracking all users’ results and answers. So, you will understand needs of the students better, and based on these results, you can make a personal offer or give them a detailed feedback more rapidly. 


With the help of the Certificate module, you may create and award PDF certificates. It has an interface for managing custom certificate templates and mappings. Besides, you may choose a particular criterion and this module will award students with certificates depending on those criteria. 

And one more feature is PDF outputting. 


This module allows creating online courses on your website. You may add any type of content and any number of graded or ungraded course objects. There is an opportunity to connect this module to the previous one to create a tokenized PDF certificates on a course completion.  


This module provides tools for authorizing and managing quizzes through Drupal. For example, you can use this module to create a test for students. All points will be stored in a database and you can look through them whenever you want. There are a lot of different question types which you can use. For instance, multiple choice, a short or a long answer, scale, etc. 

H5P - Create and Share Rich Content and Applications

If there is a large amount of content on your website, you definitely should look at this module. Using H5P, you will able to create interactive videos, question sets, presentations, flashcards, etc. 

You can create tasks or tests for students, add some video for watching, upload informative presentations and more. 


The Drupal CMS is great for university websites. It is very flexible and suitable for working with Big Data and a big amount of content. Find more common Drupal advantages here

You can add a lot of functionality and useful features to your site using these Drupal modules. As a result, it will become more convenient and user-friendly. 

It is worth saying, that most of them are appropriate only for Drupal 7. But don’t worry: if you need a module for a Drupal 8 website, we can update any of them to the last version of Drupal.

And one more useful thing. We have other interesting lists of Drupal modules. Have a look at them, too: 
1. 10 Drupal modules for quizzes;
2. 10 Drupal modules for communication with users;
3. Drupal modules for ratings;
4. 10 free Drupal modules for integration with Social Media.

Jun 05 2018
Jun 05


A release of new versions of programming software is fraught with considerable difficulties - there always may be unexpected errors in the process of deploying a web application to the environment that leads to a non-working application in production. In order to minimize these risks, the methodology of continuous deployment is used. The basis of this methodology is the deployment pipeline, that allows us to automate testing and deployment of the application, thereby increasing the speed of the deployment and reducing the risks in a process of releasing a new version.

If you are using the Gitlab platform for your project, it already has a built-in CI/CD support. Together with free private repositories, a bug tracker, and other features, it makes the cloud-based service useful not only for storing code but also for testing and deploying. 

In this article, we will look at the configuration of the pipeline using Gitlab, configure necessary files, learn how to run building of the application and unit tests on a separate docker image, as well as automatically send the built application to a staging or production server. And all of this we can do just using a couple of lines in the configuration file! Sounds interesting? Let's start!

Configuring GitLab continuous delivery

First of all, you need 3 things to start using Gitlab CI: 

1. The working instance of gitlab or gitlab.com.
2. The configuration file with the description of the pipeline .gitlab-ci.yml in the root directory of your project.
3. The configured gitlab task runner, which executes the commands described in the pipeline.

Gitlab Runner is the project that is used for execution of jobs described in the .gitlab-ci.yml file and also it communicates with Gitlab using its own API.

In addition to installing an own runner on a custom hosting, you can use ready shared runners hosted on Digital Ocean. To do this, on a Gitlab project page go to settings-CI/CD-runner settings-enable shared runners in the settings of your project. There you can also find the documentation on installing your own runner on a dedicated server.

After we've finished with the runner, let's take a closer look at the deployment process. The pipeline of Gitlab consists of several stages, by default it is build, test, and deploy, each of them consists of 1 or more ci jobs. Jobs in Gitlab are independent tasks that can be performed in parallel. After completing all the jobs at one stage, the runner starts to execute the next stage.

Build and test stage

Let's create the .gitlab-ci.yml file in the root of the project and specify our custom stages: 

May 25 2018
May 25

Also, from the report of Artyom, our listeners learned that it's possible to get to DrupalCon! There are several variants on how to visit such an amazing Drupal meeting! You can become a speaker, win a grant, save up money for this trip, and win a whole trip covered by the organizational team, like it happened prior to DrupalCon Nashville. All you need is a bit of obstinacy and everything will work out.

Then came the turn of serious technical reports. Anton shared his thoughts on the CKeditor and Paragraphs: which one is better in his opinion and why. Anton told about the differences in all aspects: settings, work, layout. Also, he showed how you can add any type of content on a website page using one of these tools.

May 08 2018
May 08

How to get Drupal 8 site data to a mobile app

Imagine a situation: your mobile application needs to get some information from your site on Drupal 8 using JSON. How to do it without much effort and installing additional modules, how to change the JSON array programmatically, and send the JSON data with and without using Views - all of these you will learn from this article.

Several ways to create and send data in the JSON format in Drupal 8

Good news! You do not need to write code or download additional modules to configure the sending of a JSON data using REST and to customize a JSON array. Everything you need is already in the core of Drupal 8. First of all, you need to install the Views and Rest modules and determine an exported content type. If you have never worked and are not familiar with the Rest module, I recommend that you familiarize yourself with this guide before reading the rest of the article.

Send the JSON data with REST and Views

Step 1

Create a new view. At this step, you just select a name, content type, click “REST EXPORT SETTINGS”, and set a path via which you will later get the data in the JSON format.

Apr 29 2018
Apr 29

There’s the book about givers and takers that I’m reading right now. Adam Grant, the author, claims the good will conquer the evil, a poor girl will find her prince, the givers will triumph over the takers and exchangers. That sounds too sweet, but Adam wins me step by step with his statistics and researchers. Here’s my little feedback on what I’ve seen during 4 days at DrupalCon Nashville: as a volunteer and a grant receiver, as an attendee and a Drupal team member. The little feedback on the Community of givers. 

Drupal team member and an attendee experience

I work for the great team ADCI Solutions and it’s the place where I’m becoming the person and the professional I want to be. That was them who motivated (and pushed haha) me to apply for DrupalCon Vienna and DrupalCon Nashville. Eventually, it worked out! 

I knew what DrupalCon is like but it didn’t cease to impress me. Music City Center embraced me with all its countless rooms and people, people, people around me! If you haven’t been to DrupalCon this year or haven’t been keeping an eye on it, this time there were several more session tracks like Building Community, Technical Leadership, Ambitious Digital Experiences - everybody is welcome, literally. 

My colleague Marina was chosen to deliver the session on leadership - more than 80 people came if my counting skills don’t give up on me. And all together - me, Marina, our CEO Alex and team lead Artyom initiated the marketing BoF. Check the outputs here. We were lucky to have a rather international gathering: Russia, Canada, the USA, the Netherlands. 

Besides the official schedule, how does DrupalCon feel like and look like? You are impatiently waiting for a morning to come to get up early and hit up the conference venue. There are so many Drupalers you still haven’t talked to. There are so many discussions and BoFs to participate. Especially I loved the First-Time Attendee Social. It charged me with energy for the whole week and let my fears go. 

Spice it all up with parties and Nashville’s big city lights - it feels magical (or probably I am still under the impression?). 

Apr 02 2018
Apr 02


Each category inside of a dashboard contains references to the documentation. Acquia provides extensive documentation and a number of articles about working with Cloud and Drupal, writing modules, working with drush aliases, ssh, cron, rsync, etc. - lots of useful things for the development process.

Acquia provides services that can be integrated into a site hosted on Cloud.

Acquia insight

Acquia Insight is a tool that looks through a site, evaluates its performance and security, and gives out Acquia Insight Score. A higher score means that fewer issues have been found. If you have ever struggled to explain to a client some technical problem the site has (e.g. why PHP code should be removed from blocks and panels), Insight may help you by highlighting these problems in a report and lowering the overall Acquia Insight score. Clients would like to see a nice green mark of “100%” there instead, so Acquia Insight can help you convince them to approve tasks on refactoring and optimization.

Acquia Search

Another service that works with Cloud is Acquia Search. It replaces a default site’s search through a database so it works faster. Acquia Search is a combination of Drupal module and software configuration on a server and it is based on Apache Solr and Facet API. However, you should be careful with the configuration of search indexes on different environments when using this module, otherwise, nodes from a dev site (or even a local machine) can make their way to search results on a live site. To prevent that, search indexes should be set in the read-only mode on all environments besides prod.


To sum up, Acquia Cloud is a hosting platform that integrates with a development workflow to help you spend time efficiently. By providing developers with isolated environments for different purposes, centralizing deployment in one interface and giving tools and documentation on how to use them, Acquia Cloud saves you time and effort.

Now you know some ways how cloud hosting can improve your work process, so you can test them yourself with a 30-day trial application on Acquia Cloud Free.

P.S. In case you have missed part one of this series of articles - check out what benefits you can get from another cloud platform - Pantheon.

Mar 20 2018
Mar 20

This spring weekend was really fruitful. And all of this because of Drupal Global Training Day which we have held for the 6th time. We are proud of the opportunity to be a part of this amazing event. The ADCI Solutions team is still the only one who holds GTD in the whole Russian Federation! So our participants had the really unique possibility.

This time we decided to make this event even more interesting and useful and divided the programme into 2 days. The first day was a theory day, and the second was full of practical tasks.  But let’s dive into the details of Drupal GTD in Omsk.

On the first day, newcomers listened to 5 reports on web development team’s work. Our speakers told about each part of a project work from the beginning till the end.
From the Denis’ speech, the audience learned how a whole project is designed. Denis narrated about each role in a web development team and how they should work for the successful finish.

Tanya told about web designers’ responsibilities and tasks in the project. She shared all of her favorite work tools with Drupal GTD participants. Also, Tanya referred to the question of empathy and said how it’s important to love your colleagues.

Then, Artyom and Sasha showed the back-end part of work. They explained the value of it. “If something breaks in the back-end part, the user will notice it because the site simply doesn’t work”, - Artyom said.

Guys from the front-end department - Maksim and Dima - told about their job. They shared tools and useful links with the help of which newcomers could dive into the JS world.
And the brilliant end of our Global Training Day became the Iuliia's report on the Drupal Community and Open Source features. She narrated real-life stories about people from the Drupal world who became successful.

We heard a lot of warm words from our participants and were waiting for the second day with a great impatience.

On the second day, Marina and her assistants held a captivating code competition. They showed to newcomers how to build their own website with Drupal, how to make a custom theme and custom module. To our great pleasure, all of the teams got the tasks done.
Look at the photos from the 6th Drupal GTD in Omsk in the gallery.

Mar 13 2018
Mar 13


Vue.js is a great framework for developing different kinds of web applications, however, it has a problem with SEO: the asynchronous content of an application can't be optimally crawled by search engine bots, so it could be a huge problem for your business. In this article, we will tell you about one of the easiest ways to resolve this problem and, at the same time, to improve the UX of your application. Yes, we will talk about prerendering.

Prerendering is a process to preload all elements on the page and generate the static HTML of your Single Page Application.

Advantages of prerendering

The usage of prerendering has the following benefits:

  1. SEO. Yes, finally, we can solve the problem of SEO for sites with asynchronous data: all such data will be preloaded before the crawler will index your site.
  2. Speeding up page content loading. The user can get an access to your application even before the entire JavaScript loads which significantly improves the UX of your application. No one likes to wait a long time.
  3. Cheap graceful degradation. This point follows the previous one. Now even users of old browsers or users with a disabled JS or a slow device have the access to your application. Of course, they are not able to fully interact with it but they can access important information instead of seeing an empty page.
  4. Rich Previews. All unique OpenGraph metadata are prefetched correctly now. Share your site on the Facebook and other socials, to expand target audience.

The official Vue documentation proposes to use the prerender-spa-plugin for prerendering. In common, the plugin does the following steps:

  1. It creates an instance of Phantom JS and runs the application.
  2. Takes a snapshot of the DOM.
  3. Outputs the snapshot to an HTML file in our build folder.

All right, let’s see how it works in practice.

Practice: prerendering in a Vue.js application

For demonstration, I will use the application which was created in my previous article about a single page Vue application. Get familiar with the project and start with building a simple SPA following the guide in the article, or, if you want to continue right now, just clone the repo and jump to the step 4 in that guide:

$ git clone [email protected]:DChuchin/vue-spa-tutorial.git
$ cd vue-spa-tutorial
$ git checkout step-4

Now install the plugin:

npm install --save-dev prerender-spa-plugin

After that, we need to configure the plugin for the correct work. Let’s go to webpack.conf.js and add the following settings:

var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

module.exports = {
  // ...
  plugins: [
    new PrerenderSpaPlugin(
      // Absolute path to compiled SPA
      path.join(__dirname, '.'),
      // List of routes to prerender

Here we specify a directory from which we want to get a page for prerendering. In our case, this is the root directory. Also, we should add a list of routes which we want to prerender. For demonstration purposes, I will take just first four posts.

We should also take into account that we get data asynchronously, so if we carry on building the app following this approach, we’ll get a generated HTML with no content. To address this issue, the plugin offers three next options (check the documentation for more info):

// NOTE: Unless you are relying on asynchronously rendered content,
        // such as after an Ajax request, none of these options should be
        // necessary. All synchronous scripts are already executed before
        // capturing the page content.

        // Wait until a specific event is fired on the document.
        captureAfterDocumentEvent: 'custom-post-render-event',
        // This is how you would trigger this example event:
        // document.dispatchEvent(new Event('custom-post-render-event'))

        // Wait until a specific element is detected with
        // document.querySelector.
        captureAfterElementExists: '#content',

        // Wait until a number of milliseconds has passed after scripts
        // have been executed. It's important to note that this may
        // produce unreliable results when relying on network
        // communication or other operations with highly variable timing.
        captureAfterTime: 5000,

        // NOTE: You can even combine strategies if you like. For example,
        // if you only _sometimes_ want to wait for an event to fire, you
        // can create a timeout by combining captureAfterTime with
        // captureAfterDocumentEvent. When combining strategies, page
        // content will be captured after the first triggered strategy.

That’s all, folks! Now if we build the application, we get a prerendered HTML. If you want to manage metadata, you can use one of the available plugins for Vue, for example, vue-meta. For instance, let’s add a unique title for each page. We need to instal the plugin for this.

npm install vue-meta --save

Add it into main.js

import Meta from 'vue-meta'


const router = new Router({


And insert the following into src/components/Post.vue

metaInfo() {
  return {
    title: this.post && this.post.title,

It’s enough to make the content of the application indexed and also available for users with a disabled JavaScript. Now search engines and social networks can read meta-information of our site. Also, we succeeded to reduce the load time to the FMP (first meaningful paint), the browser doesn’t wait for the full load of JavaScript but starts rendering our page as soon as HTML is loaded. As a result, a user can start receiving information from our site earlier.

When you don’t need prerendering

Using the simple plugin prerender-spa-plugin on a build step you can easily improve search engine optimization and create the better user experience of your Vue application. Unfortunately, there are few cases when using prerendering is inappropriate.

  1. User-specific content: some page’s content, e.g. user profile page content, should be shown only for a specific user. On the build step, we don’t know who exactly will open this page, so we can’t prerender it. Anyway, if we did it, we would open user’s private information to everybody.
  2. Frequently changing content: if you work on something like a chat or some online trading application or real-time game where content must be always relevant, usage of prerendering might be ineffective as it displays an old content until a client-side JS takes over with the latest data. As a potential solution, you could set your build to re-prerender every time as data changes, or often enough to be sure that content is relevant. But it might be very resource-consuming for the server. For the data that is updated even more frequently than every minute, you should avoid prerendering.
  3. A large number of routes: it is not a good idea to prerender thousands of routes as this will take a lot of time to build your application.

In these cases, the best way is to use server-side rendering which you will be told about in the future article.

Useful links

The official Vue documentation
The Prerender SPA Plugin documentation

Feb 11 2018
Feb 11

Hello girls and boys! Today I want to talk about the trends that I was tracking the past year. But first I want to mention how I feel about articles like these. I think that the stupidest thing a designer can do — is to simply list the trends with awesome pictures from dribbble.com. How does it work?

Step 1. Go to the dribbble.com.

Step 2. Copy and Paste shots from «Popular» to your Google document.

Step 3. Write 2 or 3 sentences why these shots are popular now.

Step 4. Get the «Claps» or «Thumbs-up» from people who like pretty images.

These «Top Trends» don’t include really useful and resourceful information for young designers and your colleagues. If you want to create something interesting, show your reflections! You can write how these projects help you in work, or what you like in these streams of trends.

In 2017, we couldn't help but see how the design community promotes new styles and creative solutions in all areas of design. The big bang illustrations, substandard methods in branding, revolutions in the virtual technologies, nostalgy of 80’s, and many other interesting design solutions in the digital space.

In this article, I want to place the tendencies that are really interesting to me. And, in my opinion, these trends will be developing in 2018.

I'm a fan of a system approach. I love studios and teams of big products that create inner Design Systems and promote them to the masses.

The systems thinking creates a pattern that helps solve many issues in development and users interfaces design. The products that were created with Design Systems result in a greater efficiency than works done simply with the help of beautiful pictures.

For creating Design Systems yourself, the experience and knowledge of all teams members are essential. You can conduct a dialogue with your team and create a design system for your company. And then all the brand assets will contain certain rules. The system will help your company create new solutions for all design needs: website, mobile app, illustrations, events, advertising etc.

Below you will find the examples of products and promo-projects of my favorite studios that created Design Systems. All new interesting studios always save and share them with each other. Now we working on our design guide for our company needs, too.

Design Systems

designsystems.com by Figma

2017 has shown a real breakthrough for illustrators and their relevance. The most popular companies used the potential of young and true professionals in Illustrations and created the absolutely new brand identity for products on websites and mobile apps.

Graphics movements, crazy brushes, and unique styles of illustrators amaze with their diversity:

  • typical flat
  • isometric projections
  • noise like a power tool
  • story animation
  • soft and fluidity shapes
  • variable style combinations

True professionals and underground artists with a personal style and finely-honed skills will always be relevant. The list of the most popular brands always grows. In the future, we will see more wonderful and stylish products. Attaboy, illustrators! Well done!

Commercial Illustrations

Malika Favre

Commercial Illustrations


A modern designer is a designer who uses animation. We can create animation for everything: user interfaces, illustrations, typography, logos, etc. A vivid design is a source of emotions, and it brings the absolutely different perception of content.

Why do we empathize with characters from the Disney cartoons? When I look at Bambi, which was created in the year 42 of the last century, I still cry and sympathize with this story. Many factors influence this, of course. But Walt Disney managed to create such an approach in animated cartoons that helps us enjoy the most lively and realistic characters.

The same goes for design animation. A designer should tell stories and show the evolution of his/her design decisions, and not just make beautiful static layouts. In addition, you can learn Disney's Twelve Basic Principles of Animation. And create new realistic projects with your story.

Movement: UI, Characters, and Logo

by Adam Grabowski for Google

I believe that five years later every teenager and adult will have Virtual Reality Glasses. And we are going to a fight on laser swords in the mountains with the awesome nature, right in our rooms.

Now we see how VR is making a revolution. Many different promo-websites and games from big studios start on a worldwide level. You with your friends can visit an exhibition of modern art or go to a forest straight from a sofa. Designers can paint with a brush in the air. And all this is very cool and powerful, in its own way.

In 2017, our CEO visited the DrupalCon conference in Baltimore. He brought several Google Cardboards to our team. We are still having fun with these glasses: arranging carousels on our office chairs and enjoying new promo-websites of crazy Russian and foreign studios :-)

The rise of VR (Virtual Reality)


Thanks to the teamwork of Google, Adobe, Apple, and Microsoft, we can imagine the creation of a user interface, branding, graphics, etc. in all creative fields with a new kind of typography — Variable fonts.

Imagine that one font family can include all of the styles options: weight, height, a paragraph, letter spacing, etc. In one project, we can create styles combinations for various goals including: Regular, Bold, Italic, maybe Black, and all of these — one font.

OpenType Font Variations is a new technology that requires substantial updates and implementation in our typical working process. Also, it has a very limited backward compatibility. So, we will wait for new updates and transformation of designers and web developers work.

In 2017, I discovered for myself and my colleagues a crazy style that has been existing since the 2000s  — Brutalism. Personally, I really loved it from the bottom of my heart. And on the corporate party, we even designed a game for our big team — «Brutal design or poor design».

Brutalism is a powerful architectural style from the 1950s. The main features of this style were massive concrete usage, sharp angles, and rough shapes. This style doesn't need to look pretty as long as they serve their goals.

User Interface in this style goes back to the basics of website design and reminds us of the Internet's early days. Bold and large content, custom colors and pictograms, fun and weird photos scattered all over the space, sloppy layouts systems. All of this isn’t a real style, but in such projects, we see a lot of humor.

Brutalism with its idea, shapes, and content shows us that design it is not only aesthetics in its traditional sense. This style shows to viewers that aesthetics isn’t necessarily elegant and that websites don’t have to be only selling.

Again, no one expected that Helvetica Light used by the most popular brand can smoothly evolve into Bold and still look cool ;-) You just look at these work of crazy designers. They are beautiful!

Brutalism in the new reality


 Brutalism in the new reality

Southbank Centre

Websites that present a product or a company through a story and power content will always be on a big step ahead of those that display products using only pretty images. The product that is promoted by only “awesome” or really awesome graphics goes out of fashion very quickly and a designer has to create a new solution with the current trends.

A qualitative and seriously robust text will always be in high demand in the digital area, products, mobile applications, branding, and so on. The designer should be bound with the text: read about an experience of many different designers, learn how to use content in case studies and in live projects, and, of course, the designer can write about his/her own background in the profession and share a work experience.

When you work on design, you must always think how a text will work and be friends with it. In addition, you need friends and more communication with marketers, managers, and all who work with you on a project.

In the digital products, we are accustomed to seeing the modern and power Grotesque font families in combination with typical grid systems of designers layout. But now, we can see how big brands are choosing more traditional solutions for work with the typography and the graphic design.

Increasingly we can meet Serif Fonts in the UI Design. For example, that can be applications for reading big articles or just beautiful website with a perfect work of a designer. Also, you can see this trend in posters, branding, and everywhere it is appropriate.

Designers create more lettering and new interesting fonts. Russian font designers start to steadily use Cyrillic and create more wonderful font families which we really want to use in the world projects. And I am sure that we can show how Russian design can be unique and independent of the world designers community with its own school of design.

Bold typography and Serifs return to the web


Trends are cyclical. Now everything that surrounds us - fashion, games, music, popular films and serials, posters - all of this are trends from the 80's and 90's.

Colors, images, patterns, and favorite characters are replaced by others. And now instead of soft and cute colors more electric hues colors and palettes come. With moving away from super-duper flat characters, we can find an inspiration in new shapes, different dimensions, emotion, wonderful colors, patterns, and textures of that time.

Today, successful personalities are people of the 80’s and 90’s. And it's not surprising that fashion trends intersect with the most popular and influential people of our generation. Maybe, the noisiest and popular solutions in the design are created in order to remember the old days and enjoy the nostalgia.

Design Inspired by the 80's and 90's


Design Inspired by the 80's and 90's

by Shuka Design

Now in the world, the robotics development is gaining momentum. Hence, a lot of games, movies, comics, and promotional projects are dedicated to cyberpunk.

The technical and industrial designers, illustrators, and graphic designers amaze with their diligence and results. These wonderful works are precisely deserving attention. I really love monitoring these projects and find inspiration in everything that I consider interesting and indicative.

The robotics together with the digital design and a neon light make a perfect combination, I believe. When I go to movies to watch «Blade Runner 2049» or «Mother!» I take many design ideas from the movies for myself: characters, colors, animated credit titles, new emotion, of course. After that, I always analyze everything: assembling, music, actors, scenes, and story. All of these materials from one film I absorb inside myself. This affects my work, imagination, and perception in all spheres.

In 2017, we saw many different graphic solutions with cyberpunk style and in 2018 we will see something new and more dazzling.

Cyberpunk and Glitch effects


I want to repeat one thought and add a one new.

First, don't learn only from digest and articles that are created by many designers. I am one of those designers ;-) Look for the information and keep it for yourself. Learn how to organize «favorites» in your browser, apps, and social networks. Fall in love with the order and always write your own thoughts about the works of other designers.

The second thought that I want to emphasize for everyone:

«All the designers can use a variety of graphics solutions. It is just tools and a demonstration of skills. Anyway, all of your design should be alive and emotional. All of the rest doesn’t matter.»

Thank you so much for reading all of my thoughts about modern trends. I hope that my article was useful or at least interesting for you. If you have questions or you just want to chat with me about design, email me: [email protected] And see you in 2019!

Feb 07 2018
Feb 07


A basic web hosting stores code and a database of a site and makes it accessible for internet users. However, modern hosting platforms do more than that - they act as a tool of the development process. Acquia Cloud is one of such modern hosting platforms that can enhance your work in a number of ways. Here are some of them:

  • isolated environments for dev, stage, and prod;
  • workflow and git support;
  • basic configuration controllable from a dashboard;
  • extensive documentation;
  • Acquia Insight and Acquia Search.

Let’s look at them in detail.

Isolated environments

Acquia Cloud provides 3 isolated environments out of the box: dev, stage, and prod. Each of them is used for different purposes: a common approach is to test changes on dev, move them to stage to show to a client, and deploy to prod once the client approves them. Each environment has its own code instance, a database, and files. For an initial site import, you can upload a database backup and files to the environment using the ssh connection. Later, the database and the files can be moved between environments by using drag-and-drop in a dashboard. Code can be switched between dev, stage, and prod, too. And that’s the next point.

Acquia Cloud: Isolated environments

Workflow and git support

Acquia Cloud provides a git repository per site (aka application) with different branches or tags being deployed on different environments. As a developer, you are free to use whatever git workflow suits you and a project better, so code moves from one environment to another the way you want. Combine this with the ease of moving a database and files around - and the overall workflow between dev, stage, and prod becomes fully controlled by you, the developer! If you are familiar with the workflow of Pantheon, you already see how flexible workflow on Acquia Cloud is. Of course, you can work in the way Pantheon suggests, you just don’t have to. Acquia provides the workflow recommendations but it’s up to you whether to use them or not.

For current projects, we use this workflow.

There are 3 main branches - master, dev, and stage (the last two are created from the master). The dev branch is deployed on the dev environment, the stage branch is deployed on the stage environment, and a relevant tag created from the master branch is deployed on the production one. Tags are used on the prod to prevent recent master branch code updates from appearing on the live site until we want that explicitly. Also, it’s easy to switch tags around if any fixes should be applied. We create a feature branch from master to add new features to the site, and later merge the results to the dev and then to the stage branch. Once changes are checked and approved we merge the feature-branch back to the master, create a new tag and deploy it on the prod environment.

Dashboard Interface

There are more dashboard interface options available than just switching branches around environments. Here some actions available via the interface.

  • Control the workflow of code, files, a DB.
  • Create and download database backups.
  • Clear a varnish cache.
  • Set up cron jobs (you can set up a time frame, a command to run or an url to visit).
  • Add a ssl certificate, enable an https access.
  • Watch log records appearing in real time. Multiple kinds of logs can be watched: list of requests to a web server (access.log), normal drupal watchdog, a list of php errors.
  • Download most recent logs.

Acquia Cloud: logs

The interface also reminds you how to access a git repository and how to connect to a server via ssh. There you can download backups of older logs, upload files via rsync.

Acquia Cloud: scheduled jobs


Each category inside of a dashboard contains references to the documentation. Acquia provides extensive documentation and a number of articles about working with Cloud and Drupal, writing modules, working with drush aliases, ssh, cron, rsync, etc. - lots of useful things for the development process.

Acquia provides services that can be integrated into a site hosted on Cloud.

Acquia insight

Acquia Insight is a tool that looks through a site, evaluates its performance and security, and gives out Acquia Insight Score. A higher score means that fewer issues have been found. If you have ever struggled to explain to a client some technical problem the site has (e.g. why PHP code should be removed from blocks and panels), Insight may help you by highlighting these problems in a report and lowering the overall Acquia Insight score. Clients would like to see a nice green mark of “100%” there instead, so Acquia Insight can help you convince them to approve tasks on refactoring and optimization.

Acquia Search

Another service that works with Cloud is Acquia Search. It replaces a default site’s search through a database so it works faster. Acquia Search is a combination of Drupal module and software configuration on a server and it is based on Apache Solr and Facet API. However, you should be careful with the configuration of search indexes on different environments when using this module, otherwise, nodes from a dev site (or even a local machine) can make their way to search results on a live site. To prevent that, search indexes should be set in the read-only mode on all environments besides prod.


To sum up, Acquia Cloud is a hosting platform that integrates with a development workflow to help you spend time efficiently. By providing developers with isolated environments for different purposes, centralizing deployment in one interface and giving tools and documentation on how to use them, Acquia Cloud saves you time and effort.

Now you know some ways how cloud hosting can improve your work process, so you can test them yourself with a 30-day trial application on Acquia Cloud Free.

P.S.: In case you have missed part one of this series of articles - check out what benefits you can get from another cloud platform - Pantheon.

Migrate my site to Cloud

Jan 18 2018
Jan 18

The Bibliography and Citation - Altmetric module is an addition to the existing Bibliography and Citation module. Bibliography and Citation is a module that allows keeping, outputting, exporting and importing bibliographic data. The library we used is from the official CSL style repository with over 8000 styles. Those styles are available without charge under a Creative Commons Attribution-ShareAlike (BY-SA) license. Learn more about Bibliography and Citation here.

The Bibliography and  Citation - Altmetric module adds Altmetric badges to reference entities provided by the "Bibliography & Citation - Entity" submodule. Altmetric badges (donuts by default) visualize the influence of your published content and show a number of times your content was mentioned.

How does it work? Each donut gives your website visitors one-click access to the collated record of online attention for each piece of research, where they can browse all of the original mentions and shares associated with it.


  • The module Bibliography & Citation

The module is under an active development. If you have any questions or need more information, please, contact us.

Nov 15 2017
Nov 15

Drupal Cafe #16

Hello, our Drupal friends! We are happy to inform you that one more Drupal Cafe was held on that Saturday. It was already the 16th time when we made it.

On that Saturday morning a lot of experienced Drupal developers and newcomers gathered together in ADCI Events Hub. We felt delighted that all of them chose Drupal but not sleep.

Drupal developers and newcomers gathered together for speaking about Drupal

That time we had decided to add a little bit of an interactivity and suggested voting and commenting all reports to our participants while their impressions were still fresh. A maximum score for a report was 5 points. And some reports had a 5 points rating but we’ll talk about this a little bit later.

At Drupal Cafe #16 more than 70 people were present. They listened to 5 excellent reports about Drupal, development, and IT company’s work.

In our program were such themes as:

  1. ADCI Solutions at DrupalCon Vienna
  2. Price of implementing the Headless Drupal approach
  3. How to render Vue.js applications on a server and what does it have to do with Drupal
  4. Drupal: evil within?
  5. 14 principles of Toyota for IT companies  

First speakers were Marina and Denis. They told about DrupalCon Vienna and their impression. Denis told about the latest news of the Drupal world and noted that Drupal has grown and has changed and, of course, it has gotten better since the previous version. The report was given 4.8 points.

A report about DrupalCon Vienna

The next speaker shared an engrossing business case: how to create a Headless Drupal app and which problems can appear in this work. He told about a project which was made with the help of React.js and Drupal. Experience of these web developers was given 4.9 points.   

Headless Drupal apps: React.js and Drupal

In one of the reports a topic “Vue.js and its rendering” was raised. Dima and Erlan told about methods and tools which can help you make this process qualitative, reliable, and fast. The report was quite voluminous, the guys told about problems with SPA and how to solve them, they also touched on the topic of rendering and various tools for carrying it out. The audience rated the report at 4.75.

Vue.js and its rendering

At the end of the conference two reports took a maximum score.

Widespread errors of developers and their consequences were discussed in the report by Sergey. He spoke about bad code and showed examples to the participants. He also told why they appeared, who was blamed - Drupal or a web developer.

Widespread errors of developers and their consequences

The last speaker at the conference was Serik Beisenov, a man who tried all jobs in an IT company - a sysadmin, a test engineer, an automatization engineer, and now he is a CEO, and he has learned everything about his work. He told us what principles made Toyota one of the leaders in the car market, and how to implement these principles into IT company's work.

What principles made Toyota one of the leaders in the car market

We had been waiting for Drupal Cafe #16 for a long time, and now that it passed we can confidently say that it was not in vain. It was an interesting conference, full of quality reports, friendly atmosphere. It was nice to learn that Drupal Cafe has regular listeners who attended all of 16 events. Now we are going to prepare for the next conference, and you can look at the photos that you will find in the gallery below.

Oct 31 2017
Oct 31


Let's imagine that you (or your customer) have a great idea of a project. You are working on it locally alone. Later you build a team and you need to share code among teammates and show an intermediate result to a client. You are not a DevOps - you don’t know each teeny-tiny technical detail of server configuration. More than that - you don’t want to know. You like just to code! And, of course, you don’t want to hire a special person to do it. What to do? You are searching for a shared hosting. And what you can see - almost all shared hostings provide you with an ugly cPanel interface and force you to upload code via SFTP. SFTP? Are you kidding me? It is not the year 2000! You need at least: an SSH access, Git, and Drush. You’d like to have a simple and convenient administration panel which allows you to do some minimal server or PHP configuration. You’d like to have isolated environments and technical domains. And of course, you’d like to keep it simple.

Sounds like a story of your life? If the answer is ‘yes’ - this article is for you.

In this and the following articles, we will tell you about popular cloud hostings: Pantheon and Acquia Cloud. We’ll observe advantages and disadvantages based on our development experience.

Let's talk about Pantheon first. Pantheon is a Website Management Platform. It allows you to work with Drupal and WordPress projects.

Start of work with Pantheon

You can start a new Drupal 7, Drupal 8 or Wordpress project in a few clicks. You just have to enter a project name. That’s all: Pantheon cloud will do all the things for you.

Also, you can migrate an existing website to Pantheon following these steps:

  • create a website archive using the drush ard command. This command will generate an import-ready archive of your website code and your DB. Please note that the maximum archive size is limited to 500MB
  • upload the archive with the Terminus tool or a direct URL
  • upload static files via SSH or SFTP

A manual migration option is also available. If you are familiar with SSH and Linux CLI - this option is for you. If you choose the manual migration, Pantheon will create an empty project for you. You have to upload a codebase, the DB, and the static files manually via SSH and using Git. See the manual here.

Ok, you created a new project or migrated an existing one and now you have an access to the Pantheon dashboard.

Pantheon Dashboard

Pantheon Dashboard

The Pantheon dashboard is really nice and well-designed. In comparison to standard cPanel - it has an intuitive UI. The Pantheon dashboard allows you to perform different actions on a project very easy. You can:

  • Choose the connection mode (Git or SFTP)
  • Move a database and static files between environments, import and export the DB and the static files
  • Add and manage domains
  • Add HTTPS (available only for a pro account and higher)
  • Manage backups and configure scheduled backups
  • Protect your environments with simple HTTP-auth
  • Update Drupal Core
  • Deploy code changes or merge multidev branches
  • Enable some add-on’s

More than that you can:

  • Review the commits’ history
  • See error logs
  • See a status report and the best practice recommendations

All these features are really useful and help with some route tasks of managing your project and environments.

Isolated environments

Out of box Pantheon provides 3 environments: dev, test, and prod. Pantheon creates technical domains for each environment in the following format: <environment>-<site name>.pantheonsite.io (of course, you can attach your own domain for each environment). This is a very cool feature which isn’t  used by the most of the shared hostings. It allows you to share an intermediate result with a client and demonstrate new website features.

Let’s assume that the dev environment is your working environment. Changes are available right after you push commit. You don't need to pull changes - Pantheon will pull everything automatically.

The test environment can be very close to the prod environment. You deploy some ready features into this environment to test it before going live.

The live environment will include all tested features.

Of course, a way of using these environments is up to you.

Starting with this, let's talk about development experience and a workflow.

Git workflow and Pantheon multidev

There are two types of workflow provided by Pantheon: standard and multidev.

Standard workflow:

Standard Pantheon workflow

You are working in the master branch. Of course, you or your teammates can create a branch as you used to, but Pantheon doesn’t see any of them and you can’t switch an environment to use any of these branches.

Pantheon provides the autopull feature so that you shouldn’t pull your commits: it will be done automatically out of box. All your commits go to the ‘dev’ environment.

To deploy changes into the test environment, you have to open this test environment and click “deploy” or do it with Terminus tool.

So, if you need some changes to be deployed to live, they should be deployed to the test environment at first and then to the live.

It sounds like a good flow: it means that you are testing all your features before they go live. But it is just on the one hand.

On the other hand, let's imagine that you are not working alone on a project. You push a feature to the dev, your teammate pushes another feature too. You are working on the same branch. At the particular moment, you have to deploy changes to the test or to the live. As far as you are working on the same branch, your teammates’ changes will be deployed too. But you only need your changes. In this case, you have to revert teammate’s changes, deploy yours, and then revert teammate’s changes on the dev again. Not a very good experience, do you agree?

It can be solved with enabling the multidev feature.

Enabling the Pantheon multidev feature

The multidev workflow allows to fork the entire stack (code and content), work independently, then merge code changes back into the master. Each forked branch will have its own separate development environment, including a database, files, and a separate Git branch. Now, you can create a separate environment for every task or feature on your project and work independently.

It is more flexible, isn’t it?

Yes, but I still need more flexibility. And it is the only thing I don’t like in Pantheon.

I don’t have a full control of my repo. Of course, the idea of the ‘dev -> test -> live’ flow is the right idea. But sometimes I want to have separate Git branches for different environments. There is no way to have it in Pantheon.

Another bad thing - hotfixes.

What if I need to push a fix very fast to live? Should I still forward my commit through the ‘dev-test-live’ deployment chain? What if there are some outstanding commits in the dev? They will be deployed too and, of course, I need to avoid it. How to solve it?

Pantheon uses the tags system for deployment. So, if you deploy something to the test,  pantheon_test_<id> tag will be created. The same for the live environment.

So, to create a hotfix to live you have to:

  • get the highest live tag, use the following command: git tag | grep pantheon_live_ | sort -k1.15n | tail -1
  • let’s assume that the highest tag is pantheon_live_10. Checkout to it: git checkout pantheon_live_10
  • create a new Git branch: git checkout -b hotfix
  • implement your hot changes in code
  • generate a new tag. Our last tag number was 10. So a new tag number should be 11. git tag -a pantheon_live_11 -m "Deploying my hotfix"
  • push it git push origin pantheon_live_11

After that, the new live tag will be automatically deployed to live. It sounds like a hack - but it is the only way to create a hotfix in Pantheon.

As I said, this is the only bad thing in Pantheon from my point of view.

Let’s examine other Pantheon cool features.

Additional features

  • Upstream updates. Pantheon team keeps track of Drupal Core updates. Once a new Drupal version is released, updates will be available on Pantheon almost immediately. Please, note that you can apply core updates only using a dashboard or using Terminus. You will not be able to update the core using the drush up drupal command. This is because Pantheon does some modifications with Drupal Core. That's why they prepare updates individually for each new version.
  • Free HTTPS via Let's Encrypt service
  • Varnish caching
  • Global CDN
  • Pantheon allows adding the Solr search server and the Redis cache server
  • Pantheon allows attaching ‘new relic’ monitoring tools


Another important feature is a command line interface which provides advanced interaction with the Pantheon cloud platform. Terminus enables you to do almost everything in a terminal that you can do in the dashboard, and much more:

  • Create a new website (project)
  • Create and delete the multidev environment
  • Clone one environment to another
  • Check for and apply upstream updates
  • Deploy code from one environment to another
  • Create your own command and extensions
  • ….

If you are familiar with the Linux terminal - it is a good alternative to a UI dashboard.


Cloud hosting platforms are the next level of hosting solutions. In this article, you learned about the popular platform called Pantheon and how easy you can deploy the development-ready environment just in a few clicks. If you are still using an old hosting platform with cPanel - it is a good time to migrate your project to a cloud hosting.

Migrate my site

Oct 25 2017
Oct 25

Top free good-looking Drupal themes

What makes websites and website templates look good? A professional and beautiful design does. It should not detract from the main content; design also should facilitate the perception of information. In a good design, there are no excessive elements: every text field, a button or a picture are placed purposefully.

It is difficult enough to find both free and good quality themes. So let us introduce a list of good-looking themes which are free to use. Themes are placed here in no order.

Flat Zymphonies theme

Flat Zymphonies theme

Flat Zymphonies Theme is the one-page responsive theme. It has all needed sections for good storytelling. A big hero image creates a strong impression, a nice color scheme and a minimum of graphic elements make this theme suitable for lots of businesses. In general, the theme has good structure and shows clarity of thought.

Fresh Theme

Fresh Theme

Fresh theme has a structure typical for a blog: a big hero image and a two column layout. It is suitable for professional blogs and media. It has the stylish design with nice raster effects, such as noise, which create good vibes. The theme has fixed width and isn’t optimized for mobile devices. But we know how to fix this.

Blogger Theme

Blogger Theme

Blogger theme is good for almost every kind of blog: traveling, health, business, etc.The theme looks simple yet informative. The design of the theme is easy for understanding, it is clean and minimal. You can go over the pages and grasp the meaning without extra efforts. The theme is responsive and mobile-friendly.

Clean Theme

Clean Theme

Clean Theme is especially good for tech blogs and business stories. It has classic look with a calm color palette which still has bright blue accents. All in all, the theme makes solid and positive impression; also it has several page layouts.

Clean Corporate Theme

Clean Corporate Theme

Clean Corporate theme is a simple and clean multi-purpose theme by ADCI Solutions. It can be used for professional business and corporate sites, portfolios, and promotion of services. The theme is fully responsive and looks nice on any device.

Nexus Theme

Nexus Theme

Nexus theme can be used for different kinds of websites: a blog, a portfolio, and other. It has a responsive layout, the overall design is flat and modern. The theme consists of several pages: home, about, blogs, contact, and typography.

Parallax Zymphonies Theme

Parallax Zymphonies Theme

Parallax Zymphonies theme is a professional responsive theme which will look good on the web, tablet, and mobile versions. This theme has a parallax scrolling effect which is trending. This theme is a good solution for both a business and a personal website.

Multipurpose corporate theme

Multipurpose corporate theme

Multipurpose corporate theme is a modern-looking theme by ADCI Solutions. It can be used for professional business and corporate sites, portfolios, events promotions, and more. The theme includes a variety of blocks, a nice portfolio page, a blog page, and a typography page. The theme is fully responsive and looks nice on any device.

Corporate Clean

Corporate Clean

Corporate Clean is a free Drupal theme which is responsive and looks good on any device. The theme has such features as color module integration, 1-3-column layout support, and slideshow integration. The theme was created in 2011 and is still maintained.

Omega KickStart

Omega KickStart

This is a simple and modern professional theme which is responsive and well-customized. Commerce Kickstart is a multipurpose theme and it has well-designed shop sections. It also has a blog, about us, and contact pages.

We’ve observed 10 Drupal themes which you can use for your website. All of them are free and ready to use. Remember that the beautiful design of your website and the high-quality graphics аre able to sell your product or service better. I hope you enjoyed the collection.

Oct 10 2017
Oct 10

Table of contents

  1. For whom this article is
  2. Organization of files
  3. Organization of time
  4. One of the methods of working with file names
  5. Working files & time together
  6. Useful links

The organization of working files is based on the correct structure and navigation in the working folder of a project. I'm a web designer and I always work a lot with various files. And the hardest thing is to always keep my workspace in order.

If you:

  • work in a team with managers, developers, and other designers;
  • keep a heap of files;
  • use any time tracker for work;
  • give an estimation of tasks;
  • analyze workflows;
  • love order;

this article is for you. And I'll tell about my systems of the organization of files and tracking working hours.

If you love chaos and you are still quite good at work, then you don't need this article! You are doing everything right and I want to read the article about your working experience :-)

Organization of design files

The coolest thing about organization and planning is that you can create a working system yourself. The main thing is creating a rule and always follow it.

Why order is important

When you are working on a project, you and your files should be ready for everything. To quickly send a file to a project manager or a client; prepare all files of the project for development; another designer may need to find the file on the computer of another designer. This person should not spend much time on this. The solution is to always keep your working files in a right place for them.

How to understand that your system works properly

From memory, dictate the path to a necessary file. If after a year you repeat the path to the file, then the structure is built correctly.

There are two types of folders: private and general. The general folder contains files for managers. Private folders are a workspace for designers.

Design folders

In «Inbox» you can store files which you receive from a client in the beginning of the project, or in process.

«Out» is a place for the latest versions of layouts. The files in this folder should be all set to be sent to the client.

«Work» is a space for designers. Sketches, guides, specs, layouts etc. — all of this common files of the project with which designers work are located in this space. Here you can to do all that you want, if you are a designer, of course (っ◕‿◕)っ

If you have your own habits of naming folders that you understand, you should not give it up. For example, if you have a folder for sketches, and you are used to giving it a name such as “test” or “try” -  you feel free to name your files this way. In other words, it is can be a popular and typical folder with an atypical name for it.

Folders that require special attention can be tagged with a color. For example, it can be the folder «Edits» tagged with the red color.

«Sterile zone» is folders which you constantly fill with updated files. Old versions should be added to the Bin folder. Of course, you can keep few versions of files, just give them clear designations: v1, v2, v3…

Rule: files from the folder Work should not be delivered to the client.

When projects are completed you archive them. One year — one archive. If you have one client with several projects, create one family folder and keep all projects here.

Typical mistakes

  1. Names of files look like this: project_final_01a_v05.ai: it’s a bad example name of a file because after the part «final» that means the latest version of this file, the keys (_01a_v05) are situated. They show us that the file has a status «in work».
  2. Files contain fonts which are not free or are not in a public domain: if you use commercial fonts in your files, always provide a license for the font for a developer. If you have problems with a purchase use the free library. Find the services where you can buy fonts at the block «Useful links»
  3. Different versions of the software: if you use programs by Adobe, you should be sure that all of the project files were created in the same version. Otherwise, you can create some technical problems for your colleagues involving further work with project entities.
  4. Graphics are created in a program that is rarely used — use modern graphic editors and apps for your workflow. You will be sure that your graphics can be exported in the needed graphics’ format for front-end work. Also, if each member of the design department uses the same software, you will never get into trouble with the synchronization of files.

Rule for beginners

Only one person is responsible for order in the project folder. This person controls all of the working group and keeps up the order. It’s necessary to prepare the document which contains rules and principles of work with working files for new designers. The document must be issued in the beginning of the project. The information in the document is updated by a lead designer, if necessary.

In our design team, we always track time and control our workflow.The analysis of your working hours will help you advance your experience. You see your mistakes and it helps you work on bugs. And, of course, good statistics motivates you and your colleagues.

We use Toggl for tracking of time. The app has a simple interface and is available for all operating systems.


  • free;
  • desktop app;
  • dashboard by a period of time;
  • description of tasks;
  • creating projects;
  • creating clients with a few projects;
  • for personal and team use.

Here is how Summary report for a period of time: 1st Jan - 1st Oct looks in the Toggl interface.

The Toogl interface.

The app helps you create a simple report in two clicks. You get a PDF file with detailed descriptions of all your tasks, a total time for a particular period.

When you need to do an estimation of a task, use your previous experience! You just need to find this task in a similar completed project. It’s really helpful. Of course, you should bring to notice special aspects of tasks, because they will always be unlike each other.

One of the methods of working with file names

Oh, just look at this folder with a new season of Twin Peaks! All the episodes are numbered and have a beautiful cover.

My art director has shown me one principle of file management that I still can not refuse.

How does it work

When you give a name to your project files use episodes instead of versions.

Example: ProjectName_FileName_s01e01

«Seasons» are the stages of a project. For example, you can work on one idea and concept of the product. And when you get a feedback about your design from clients, you usually complete one of the stages and start working with updates. After that, you can start new seasons with new ideas.

«Episodes» are versions of design. Further you create more episodes: e02, e03...

The most important thing is that you should save all of your ideas, even those that you will not use in the final version.This way you don’t miss anything, and in the future you can implement good ideas.

When the project is over you can analyze your work and see how many seasons your project came through. Sometimes we work with fast projects of one or two seasons, but sometimes we have a very big project of 6 or 8 seasons.

Project's seasons

Of course, it is only a method of organizing and it doesn't show your working skills, but I like it and it helps to facilitate my workflow :-)

When you maintain order not only in your own folders but also in your time tracker you can combine all your workspaces.

Why is it necessary

Sometimes you start running a time tracker and name a task like this: design. And all day you can do different iterations: search ideas, work with illustrations, go to a meeting with a team, write a letter, etc. But then you can not analyze your work time correctly.

What do you need

You need to create templates for your work iterations and always give the right name for a task in the time tracker.

I have a special document where all my types of iterations are located.

Types of iterations:

  • Investigation
  • Design
  • Design Review
  • Communication
  • Meeting
  • Planning
  • Education

Description of iterations should be very detailed so that you really understand what you mean.


  1. Planning — Weekly / Daily Agenda
  2. Meeting — Design team — clients’ feedback and planning
  3. Design — ProjectName_Home — Wireframe
  4. Design — ProjectName_Home_s01e02 — Illustrations
  5. Communication — Letter

In Toggl, your daily report will look like this:

Toggl daily report

If you do this all the time you will have an awesome skill in your skill set. You can analyze your work: what you do faster, when you need help from your colleagues. And you can improve your workflow.

I hope my experience and specific methods will be useful for you. And that you found something interesting for organization of your workspace in this article, too.

Articles on related materials from our team

  1. Product development process
  2. How to befriend design and front-end
  3. Internal development kitchen
  4. Why remote team?


  1. Myfonts.com
  2. fonts.google.com
  3. fontsquirrel.com
Oct 06 2017
Oct 06

This year in Vienna there were a lot of speakers, specialists and just people who love Drupal and work with it. And all of this thanks to DrupalCon - the most exciting event for each Drupalist.  

We just couldn't stay away and, of course, our team members - Denis, Alex and Marina - went to Vienna for sharing their experience and getting a new one back.

ADCI Solutions at DrupalCon Vienna

DrupalCon started with the big business-summit. That event focused on specific problems and opportunities which business owners face in their daily routine. Our colleagues joined the Marketing & Collaboration workshop and learned about the best practices in the development of the Drupal business.

The second big meeting was the next day. There new milestones of Drupal were discussed.

A clue session was a speech by Dries Buytaert, the Drupal’s creator. It was very inspirational and informative. There are some moments from this one:

  • The number of fixed problems increased by 22%, the number of unique participants increased by 28%, and companies -  26%.
  • For the first time in the team there are not only developers but also a designer.
  • The latest version of Drupal 8 is gradually gaining an audience: 38% use only this.
  • Drupal companies started to use new technologies, like Vue.js, Symfony, and React.js, etc. It means that now clients get even a more flexible product.

By the way, we have applied these technologies to our work and make projects with React.js, Symfony, and Vue.js now. It is really awesome! You should try it.

ADCI Solutions at DrupalCon Vienna

The same day was full of sessions and we shared our experience, too. Marina performed at DrupalCon for the second time. She spoke in the non-technical section - "Being Human" with a report: "A leader or a manager? How to define your leadership stand".  A lot of people came to listen to Marina and ask her questions. “It went pretty well. I was really enjoying this experience in the end”, - said Marina about her speech. The video is available below.

[embedded content]

Besides, Marina and Denis conducted their own BoFs. At Marina’s BoF, cruel marketing, sales, successes, tools, and life situations in promoting Drupal services were talked over. Denis’ BoF gathered together representatives of higher education and experts in Drupal. They discussed problems and modern practices which can help to solve them. The result of Denis’ BoF was an answer to the question: “What institutes are looking for today and how these problems can be implemented with the help of Drupal?”.

Our team members hold excellent sessions at DrupalCon. We are proud and congratulate them.

DrupalCon ended with a traditional informal party where you could relax a bit from sessions and discuss new knowledge with like-minded people.

DrupalCon Vienna was attended by 1670 people! Almost a third of them were at DrupalCon for the first time, and 24% of speakers had a session for the first time, as well. 6204 sandwiches were eaten and 5778 hot cups of coffee were drunk during DrupalCon. This means that Drupal conquers more and more minds and become better.

After all our guys went to Berlin for a meeting with ladies and gentlemen from GoldLand Media. It was the interesting weekend. You can read about it in this blog.

Oct 02 2017
Oct 02


What's the difference between single-page application and multi-page application?

Nowadays, websites more and more look like applications with many interaction possibilities rather than static pages which we had around 10 years ago. On the one hand, the reasons for that lie in the users' demand for receiving and generating information based on their personal characteristics and requirements. On the other hand, website owners want to provide users with more convenient user interfaces to work with the information.

Let’s take a look at how we can build a front-end part of the websites. There are two main ways of building websites today: a multi-page application (MPA) - more traditional way, and a single-page application (SPA) - more modern way. Let’s start from the multi-page approach.

Multi-page application approach

Multi-page application approach

In the simplest form, a multi-page application consists of several pages with a static information (text, images, etc) and links to the other pages with the same content. During a jump to another page, a browser reloads content of a page completely and downloads all resources again, even the components which are repeated throughout all pages (e.g., header, footer). The main technologies for such a type of website building are HTML and CSS. It was the first way of developing websites so developers are quite experienced in it and have many solutions for you. It allows to create uncomplicated websites of this type quite fast and without many problems.

Examples of multi-page applications we built:

Issues of multi-page applications and their enhancing by using new technologies

During development, a necessity in more complicated interactive components may occur (e.g., in forms). In this case, you still can use the traditional way but you will be bounded by standard functionality. However, there are more suitable technologies for non-standard, complicated and interactive things and they are JavaScript with AJAX (asynchronous JavaScript and XML). The prosperity of Web 2.0 became possible due to the evolution of these technologies. Now you can implement multi-step forms, various charts, graphs and diagrams on your website with dynamic refresh, with keeping various states, and with no need to reload the whole page. Those technologies help to integrate SaaS on your website through APIs as well and their usage improves user experience (UX) a lot.

But at one moment you can realize that your website has become too complex with the multi-page application approach and you can find yourself creating your own framework to maintain cumbersome UI on a back-end. At first, you can divide your back-end and front-end with REST API and they will communicate in a specific language of queries. At this point of time, you will need some front-end solutions. Many companies have already faced the same problems and they realized the benefit from making a source of their project open: you provide a community with a platform and the community accelerates the evolution of the solution.It’s a win-win situation. Today you have a choice between plenty of solutions with large communities and ecosystems, e.g.:

  • React
  • Angular
  • Vue

Also, there is a huge code base in NPM (Node Package Manager) where you can find solutions for almost all problems. So currently with the help of a community and its ecosystem, it’s not that hard to create dynamic, nontrivial solutions and integrate them into multi-page application websites.

The good examples of what functionality can be integrated with modern technologies into a multi-page application website

Forms and quizzes (Vue.js)

Forms and quizzes demo made with Vue.js

Forms and quizzes demo made with Vue.js

Search (React)

Search demo made with React

With the increasing role of the interaction between a user and a website, the role of JavaScript becomes even more important and, following the evolution of Web 2.0, there appears a new way of creating a presentational part of your website - single-page application, which reveals the full power of modern technologies.

Single-page application approach

Single-page application approach

When you enter a single-page application website, you download a page only one time and then the components of the page change and load only when it is required. Because of that, such website is much faster than a multi-page application. Also, if you build a single-page application, you usually use a solid mature ecosystem (it happens the other way round when you integrate interactive elements on a multi-page application websites). In addition to that, a back-end and a front-end are separated and they don’t interfere in each other’s concerns. Such approach of developing allows you to apply the latest and the most sensible patterns of developing websites and gain many profits in a long term.

However, the way of constructing single-page applications raises new problems (e.g., SEO, Performance & Optimization, Analytics), but they all have solutions already - you just need to remember about these moments. And because of these problems, developers should have particular knowledge and experience to build a website properly.

The examples of single-page application websites

  • Gmail (Google Mail)
  • Twitch
  • GitLab

Other ways of applying modern front-end technologies

At the same time, the single-page application approach not only solves many problems but opens new opportunities: you can create user interfaces for mobile and desktop applications using one codebase, or create mobile and desktop applications without creating a web version at all; also, you can create offline applications which can be used without an Internet connection and many companies experiment with technologies like a virtual and an augmented reality using web technologies (e.g., React VR).


Let's sum up all pros and cons of both approaches.

Multi-page Application


  • Simplicity of building static pages and small websites
  • Fast creation of a minimum viable product (MVP)


  • Difficulties with adding dynamics
  • Low flexibility
  • Increasing cost of changes during adding new functionality

Possible use cases

Low and middle scale websites without much dynamics and state, e.g.:

  • landings
  • content-oriented websites without much complexity
  • prototype websites

Single-Page Application


  • Less complex dynamic components building
  • Less complex large and non-trivial websites building
  • Better user experience
  • Less load on the server
  • Better client-server interaction, dividing of front-end’s and back-end’s concerns
  • Low cost of support in a long term

Moments that you should remember about

  • Security: many problems of security become the concern of front-end developers and they should know and remember about it (you can familiarize yourself with the main problems here.
  • SEO: you need to take care about server-side rendering if you need search indexing and optimization.
  • Enabled JavaScript: today it’s hard to imagine a website without JavaScript functionality and browsers’ support of it, so you can assume that it is enabled everywhere by default. But if you face the situation when you need to consider such  a case - a server-side rendering will help you.
  • Browser history: single-page application doesn’t save your jumps to another states and you can’t go back and forth with your browser by default, but most of front-end frameworks and ecosystems have routers which use Browser History API and they solve this problem.
  • Analytics: analytics of the pages relies on page loads and you can use page load events to eliminate the problem.
  • Performance & Optimization: you should remember about mobile and low-performance devices because JavaScript usage is quite heavy in single-page applications. Also, you should remember about a weight of your bundle and consider creating chunks with dynamic load to improve user experience (e.g., you can use the new Uber website after the first 50Kb loaded and it’s fast even with 2G networks).


  • Complexity
  • You need more time to create a minimum viable product (MVP)

Possible use cases

Medium or large scale websites, or websites with much dynamics and state:

  • websites with a lot of user interfaces
  • SaaS (Software as a Service) platforms or Internet services in general
  • data-driven and form-intensive applications
  • mobile applications
  • desktop applications
  • experimental fields(VR, AR)

Useful links

  1. React, library
  2. Angular, library
  3. Vue.js, library
  4. Forms and quizes demo: Vue.js, code
  5. Search demo: React, code
  6. Gmail (Google Mail)
  7. Twitch
  8. GitLab
  9. Uber website

Need website help?

Sep 29 2017
Sep 29

Table of contents

  1. Introduction
  2. OOP in Drupal 8: what differs Drupal 8 from Drupal 7
  3. Custom module creation in Drupal 8
  4. Conclusion

OOP in Drupal 8

I had only one year of experience in the web development in general, and basic knowledge of Drupal 7 in particular when I faced Drupal 8 for the first time. When I started learning Drupal 8 I was surprised by the fact that getting to know the new version is rather easy. That’s how this little tutorial was born: I understood the way you can start working with Drupal 8 faster and now you can learn from my experience.

What do you need to know to start developing in Drupal 8? It doesn’t matter whether you have worked with Drupal’s earlier versions or not: development in Drupal 8 differs a lot. One of the main reasons - switching from procedural programming to the object-oriented approach. It means that now the biggest part of your code is placed in classes. It can be quite disturbing for programmers, but that’s how the modern programming practices work.

Drupal 7 operates the solutions that are not similar to the Symfony’s or Wordpress’ ones. There is a lot of own Drupal solutions like Form API or Drupal DBAL, the functionality for batching process, the hooks system, etc. Learning all of these things can be tedious and difficult. You should always keep in mind weak places and particular qualities of different Drupal components. For instance, if you want to start writing a new module for Drupal 7, you should know how Drupal 7 works, how different hooks process and many more things. And, of course, you must read a lot of documentation beforehand. Yes, it’s difficult and takes much time.

Drupal 8 is easier for development in comparison with the earlier Drupal versions. If you know the key OOP principles, design patterns (like Event Dispatcher, Factory or Dependency Injection) - you’ll be able to understand how the new system works.

What are the main differences that you should pay attention to while developing a Drupal module?

OOP usage

It’s much easier now for complete Drupal beginners to get to know this CMS if they know OOP and design patterns. For example, while bootstrapping Drupal the default container initializes and different services become available. What are those services? In a plain language, service is a class that implements a particular functionality. You can create your own class, define it as a service and make it available in the container.

Drupal developers plan to completely refuse hooks in the version 8. The pattern Event Dispatcher is used instead. This decision was based on hooks’ drawbacks, for example, hook_invoke_all is rather resource demanding one.

All in all, you don’t have to learn the hooks system now. If you know how a particular pattern (for example, (Event Dispatcher, Dependency Injection) works, you should only implement it in your module.

For example, you have to use hook_node_type_insert() to create a new content type in Drupal 7. Now you only should implement Dispatcher and bind your method 'createRequest' to the event that was defined in the method getSubscribedEvents. See the example below:

public static function getSubscribedEvents() {
    // Subscribe to kernel request with default priority of 0.
    $events[ EntityTypeEvents::CREATE][] = array('createRequest');
    return $events;

Besides that, you couldn’t redefine the core’s functionality with the hooks system. The transition to OOP releases many options: the possibility to build more complex architecture, data encapsulation, methods’ redefining.

Symfony components usage

Symfony components are the universal and flexible solutions, especially in comparison with Drupal’s solutions in the earlier versions: they proved themselves as stable ones and they can solve much more problems. You know that it isn’t a good practice - to reinvent the wheel, - so don’t be afraid to use ready-made solutions. Also, Symfony follows the standards such as PSR-4, PSR-7. Symfony’s components are used in the Drupal core, so it is likely to facilitate Drupal’s transition to the standards’ usage. When it happens, it will simplify the Drupal’s learning curve.

Annotations usage

Drupal 8 uses annotations (the comments in your code that contain meta information). The main advantage of the annotations is that they improve performance due to the less memory usage. The annotations are placed in the same file as a class is. Below you can see the example of the annotations’ usage at the block’s class.

 * Provides a 'Custom' Block
 * @Block(
 *   id = "custom_block",
 *   admin_label = "Custom block",
 * )

Drupal 8 routing

In Drupal 8 the component Routing replaced the hook hook_menu. Now you create a controller class with the method that returns data along a certain path. For the description of routes Drupal 8 uses the YAML format. All the information about routes of a module is kept in the file MODULE_NAME.routing.yml.

Each route is described separately from the others and it must have the following characteristics:

  • a name that identifies the route;
  • a path that begins with a slash;
  • a route’s processor;
  • conditions that manage an access to the route.

Of course, that’s not the complete list of the changes in Drupal 8. However the understanding of the mentioned changes is enough to write a custom module - and that’s what we’re going to do now.

We have already discussed the crucial aspects of Drupal 8 development, but practice is very important. Let’s create a simple module to understand how classes are used and how the changes of Drupal 8 affect a coding process. I commented the code; it will help you to understand the process.
Our module will change status messages through the admin menu. Our module will allow to set a width, a height, and a background color of a pop-up window.

Step 1

I’ll show you the module’s structure in Drupal 8 right away: it was changed a lot. Classes are kept in the src folder now, this folder is divided into subfolders, too. In our example it’s just one class of a form.
The sctructure of module in Drupal 8
The list of the necessary parameters of the info file differs from Drupal 7. Now we specify name, core and type. Type can be any of these kinds: module, theme or profile. Our module will have the configuration form where we will set parameters of the status messages, and due to that we can add the characteristic Configure - a path to this configuration form.

name: 'Status message'
description: 'Module for changing status messages'
package: custom
core: 8.x
type: module

configure: modal_window.admin_settings

Step 2

Let’s create the routing file status_message.routing.yml next. I’ll show you how I created a route for a list, a submenu for an administrative form, and a route for the form itself.

status message.admin_config (in the format MODULE_NAME.KEY) creates the submenu: we define a path to the class SystemController and its method systemAdminMenuBlockPage' with the help of the key _controller.

The admin menu will contain a list of links, and we will specify a path to that admin menu with the help of Path.

Next we create a route for the setting form with the key modal_window.admin_settings, but this time we define a path to the class of our form in the key _form. The class will be situated in the directory of the module status_message in the folder Form.

 path: '/admin/config/status-message'
   _controller: '\Drupal\system\Controller\SystemController::systemAdminMenuBlockPage'
   _title: 'Settings for status messages'
   _permission: 'access administration pages'

 path: '/admin/config/status-message/modal-window'
   _form: '\Drupal\status_message\Form\StatusMessageSettings'
   _title: 'Settings for modal window'
   _permission: 'administer site configuration'

There are few things left to do before our form will appear in the admin panel. You should create the file status_message.links.menu.yml and place the code below in this folder. The first line, likewise in the case with the route file, allocates a place in the namespace. This line is the key. In the parent we indicate the parent menu link. In the route_name we indicate the key from the routing file and that key should be relevant to the link we talked about earlier. It means that the parent of status_message.admin_config is system.admin_config: thus the submenu should be at the address admin/config. Yes, we wrote the addresses in the routing file, but without the links.menu.yml file. If you switched to the address /admin/config/status-message back then, you would see the submenu configured in the routing file - but you wouldn’t find anything in the list of links at the address admin/config.

The form of configuration of the status messages has the parent status_message.admin_config due to the fact that we built the hierarchy of links.

 title: 'Status message'
 parent: system.admin_config
 route_name: status_message.admin_config
 weight: -50

 title: 'Modal window'
 description: 'In this settings you can set width, height and background for modal window of status message.'
 parent: status_message.admin_config
 route_name: modal_window.admin_settings
 weight: 1

Now if you go to /admin/config/status-message, you’ll see this:
Settings for status messages
You can’t proceed to the configuration page Modal window because we didn’t create the class of the form. Let’s do it right now!

Step 3

Create the file StatusMessageSettings.php with the address status_message/src/Form. In the first part we talked about the PSR-4 standard and an autoloading of classes. If you have a look at “use”, you’ll see the list of the classes that we upload for the further usage. Define a way to our class in Namespace. According to the standard, we omit the src folder then.

The class StatusMessageSettings is inherited from the class ConfigFormBase and even expands its possibilities. What happens here: using the OOP principles, we describe our class that is based on the already existing class; at the same time, we don’t have to bother about implementation of the class ConfigFormBase.

In the method getFormId we only return the unique form’s ID, in the method getEditableConfigNames() we return the key settings form. Bear in mind: any class that expands ConfigFormBase must implement the method getEditableConfigNames and return the array of the configuration’s names of the fields.

In the method buildForm we describe the way our form will look like: what fields, width, height, and background it will have.

A form’s class in Drupal 8 must implement the method submitForm, that’s why the last thing we have to do is to add the submit method that will return the form’s values.

namespace Drupal\status_message\Form;

use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;
 * Defines a form that configures forms module settings.

class StatusMessageSettings extends ConfigFormBase {

  * {@inheritdoc}

 public function getFormId() {
   return 'status_message_settings';

  * {@inheritdoc}

 protected function getEditableConfigNames() {
   // Return name config file.
   return [

  * {@inheritdoc}

 public function buildForm(array $form, FormStateInterface $form_state) {
   $config = $this->config('status_message.settings');
   $form['width'] = [
     '#type' => 'number',
     '#title' => $this->t('The max-width of the pop-up window in pixels.'),
     '#min' => 100,
     '#default_value' => 800,
   $form['height'] = [
     '#type' => 'number',
     '#title' => $this->t('The height of the pop-up window in pixels.'),
     '#min' => 50,

   $form['background'] = [
     '#type' => 'color',
     '#title' => $this->t('The background of the pop-up window.'),
     '#default_value' => '#efefef',

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

  * {@inheritdoc}

 public function submitForm(array &$form, FormStateInterface $form_state) {
   $values = $form_state->getValues();
   $width = $values['width'];
   $height = $values['height'];
   if(($width >= 100 || $width == '') && ($height >= 50 || $height == '')) {
       ->set('width', $values['width'])
       ->set('height', $values['height'])
       ->set('background', $values['background'])
   } else $form_state->setErrorByName('width or height', $this->t('Height can not be less than 50. Width can not be less than 100. Enter the correct value.'));

Now when you go to admin/config/status-message/modal-window, you’ll see this form:
Settings for modal window

Step 4

We created the admin form; the thing is, the values that we can set there don’t affect the way the status messages look like. Let’s correct it.

Create the file status_message.libraries.yml (it’s the replacement of the characteristics stylesheets and scripts for the switch-on of JS and CSS files in Drupal 7) where we will specify dependencies. Drupal 8 doesn't add jQuery to each page jQuery on all pages by default: only where it’s needed. For that reason, we will define that the library of our module (file modal_window_jq.js) depends on the library that contains jQuery (core/drupal.dialog.ajax).

 version: 1.x
     css/modal_window.css: {}
   js/modal_window_jq.js: {}
     - core/drupal.dialog.ajax

The next step is creating the file status_message.module. Unfortunately, we are forced to use two hooks here: the first hands over values of form’s fields to a JS file so that the parameters of the status messages are changed; the second turns on the Twig file that is the replacement of the template.php file in Drupal 8.

We included one JS file in the file libraries.yml earlier; now we can turn another one that doesn’t depend on jQuery with the help of attachments.

An access to the values of form’s fields can be obtained by
$config = \Drupal::config('status_message.settings');
But we can also do it with the help of use tag for class download like we did it before.


* Implements hook_page_attachments().

function status_message_page_attachments(array &$attachments) {
 $config = \Drupal::config('status_message.settings');
 $attachments['#attached']['library'][] = 'status_message/modal_window';
 $attachments['#attached']['drupalSettings']['statusMessage']['modalWindow']['width'] = $config->get('width');
 $attachments['#attached']['drupalSettings']['statusMessage']['modalWindow']['height'] = $config->get('height');
 $attachments['#attached']['drupalSettings']['statusMessage']['modalWindow']['background'] = $config->get('background');

* Implements hook_theme_registry_alter().

function status_message_theme_registry_alter(&$theme_registry) {
 $theme_registry['status_messages']['theme paths'] = array(0 => drupal_get_path('module', 'status_message') . '/templates');
 $theme_registry['status_messages']['theme path'] = drupal_get_path('module', 'status_message') . '/templates';
 $theme_registry['status_messages']['path'] = drupal_get_path('module', 'status_message') . '/templates';
 // tell the theme system to use 'status_message.html.twig' as the template file. Note that you do not include 'html.twig'
 $theme_registry['status_messages']['template'] = 'status_message';
 // for check big message dpm($theme_registry)

Next create the file status_message.html.twig with the address status_message/templates. As it was said before, Drupal uses Twig template engine. Our Twig inherits from status_messages.html.twig template, and that’s really important. In our example we inherit from the status_messages.html.twig template with the help of the tag extends. This way we can manage all of the aspects of the parent file and change it, too.

{% extends "@classy/misc/status-messages.html.twig" %}
{% block messages %}
   {% if message_list is not empty %}
       {{ attach_library('bartik/messages') }}
       <div class="messages__wrapper layout-container" id="m_overlay">
           <div id="modal_window">
               <div id="modal_title" class="modal_title">
                   <p class="modal_title">Status messages</p>
               {{ parent() }}
               <button class="btn-close" id="modal_close" type="button" aria-label="close">
   {% endif %}
{% endblock messages %}

What I’ll do next is changing div’s styles with id modal_window. Earlier we defined this HTML structure in the Twig file. Try to change other attributes by doing the same actions to the width and height. Feel free to experiment! You can add drag-and-drop of the window, for example, and whatever you like, but this is another story that relates to JS and jQuery, but not to Drupal.

(function ($, Drupal, settings) {

 "use strict";

 Drupal.behaviors.status_message_modal_window = {
   attach: function (context, settings) {
    var modal = $('#modal_window');
    modal.css('background', drupalSettings.statusMessage.modalWindow.background);

})(jQuery, Drupal, drupalSettings);

I changed the background color of the module in the admin menu: now I receive the status messages in pink. I showed how to include a CSS file in the file libraries, so you can change it on the front-end side whatever way you like.
Status messages
Congratulations - we have the first results! We learned how to create forms, got to know Twig files and even JS a little bit. Of course, it’s a small step and we learned just the basic principles and saw the differences in development between Drupal’s versions. But I hope it was the useful and pleasant development adventure for you.

That’s it: we created our first module for Drupal 8. I think it wasn’t difficult for you. I really love Drupal 8 because it’s rather simple and has a great architecture. Yes, you must know OOP, design patterns, Twig and modern PHP trends. But in the Internet you can find information about everything that I’ve just mentioned. Instead of learning internal Drupal mechanisms, you should learn only the basics of web development that can be applied to other technologies. A large part of the PHP frameworks uses the same Symfony components, Twig and the same design patterns. This way learning Drupal 8 you’re learning how the most of PHP-frameworks work. Have fun!

Sep 22 2017
Sep 22

Meet ADCI Solutions at DrupalCon Vienna

Hello, Drupal friends!

Our team want to make it big at DrupalCon. We prepared the session and two BoFs for you.

A leader or a manager? How to define your leadership stand

Our Head of Organizational development wil tell you how to define a leadership stand of yours. Knowing what you stand for in this life helps to get on your own feet and achieve outstanding results both in professional area and in self-realization.


Drupal for a higher education

Our senior developer initiates the discussion on Drupal solutions for a higher education and science. The aim of this BoF is to gather Drupal experts and higher education representatives: that would allow us all to hear about the problems and the possible solutions from the first-person point of view. 


Marketing challenges in the Drupal world

Another BoF is aimed at disclosing challenges we face while promoting and selling Drupal services, building the company image and communicating with a target audience. If we know the problems - we can find the solutions. 


Drop a visit!

Sep 22 2017
Sep 22

Table of contents

  1. Introduction
  2. Server-side
  3. Client-side
  4. Conclusion
  5. Useful links

A single-page application (SPA) with Vue.js
Single-page applications have many advantages, such as speed, really good UX, and, as for developing for Drupal, the full control over the markup. There are more and more sites using SPA; there are more and more tools that simplify the process of developing complex SPA. If you read our articles (if not, then you should do it), you've probably read about a young reactive framework called Vue.js, and how you can use it in Drupal. I suggest you plunge deeper into Vue and consider writing a simple SPA.
We will create a client-side application of a simple blog. This application will show a list of all articles, and also a full text of the article. And, of course, all changes will occur without reloading a page.
With the example of this application, you will get to know how to fetch data in Vue, how to create a router and also you will learn about a very interesting concept - Vue single file components.

In this tutorial, we will only talk about writing a client with Vue. We will not talk about creating a REST server. So I will use the jsonplaceholder.typicode.com service which provides the fake online REST API. Anyway, if you want to use Drupal as a backend (jeez, it is the Drupal website, of course, you do), we’ve already written about how to organize a RESTful server with Drupal 8. Check the articles on RESTful in the block Useful links.


It is really easy to start using Vue. But it might become even easier if you use the right tools.
There is a vue-awesome project which includes a list of all kinds of tools, components libraries and plugins for any occasion.


For jump-starting a new project, I highly recommend Vue-cli. Using this you can start the project with some of the official Vue project templates, or one of the many of the open-source templates, and, of course, you can create your own one and use it anywhere.
So, first of all, we need to install vue-cli as a global package:

$ npm install -g vue-cli

Then initialize project with the chosen template; for this project I used webpack-simple which is rather enough for our purpose.

$ vue init webpack-simple vue-spa

Then go to the vue-spa folder and run npm install in terminal. After installing all the packages, we can run our application in the development mode.

$ npm run dev

This will automatically launch our project on the webpack dev server. In the browser, we can see our simplest Vue application. Of course, it does not look like how we want, it is just a base to start. To continue the work I suggest first to familiarize yourself with the structure of our template.

Webpack-simple template

Inside the webpack-simple template we have the following structure:
Webpack-simple template structure There is an index.html file with a simple HTML markup including only the element with identifier “app” in a body. It will be replaced by a vue-generated DOM. That is the reason why you should not use the tag body as a root element.
In the src directory we have the main.js file which is the entry point for webpack.The Vue components are imported here. And also here we have a root Vue instance which has two properties for now. The property ‘el’ provides the Vue instance with an existing DOM element to mount on. And another one is a render function which generates DOM from App.vue. In general, this is all we need to know about the structure of the webpack-simple template, not so much, isn’t it? The main part of our application will be coded in App.vue. The .vue extension indicates that this file is a single-file vue component. It is one of the Vue’s features, let's get to know it better.

Single File Components

Single File Components Each *.vue file consists of three types of blocks: <template>, <script> and optional <style>. As the result of it, we can divide the project into loosely-coupled components. Inside a component, its template, logics, and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable. So now we are ready to create our Vue Blog.

Creating the application

Let's see what we are going to do. We have a header with the name of our blog at the top of the page. On the left side, we have a fixed sidebar in which we will display the headings of our articles, it will be something like a table of contents. And the rest of the page will be occupied by a dynamic block in which the article itself will be displayed.

Vue.js SPA

Step 1

First of all, remove all unnecessary lines from App.vue. And create a template in accordance with our requirements.

  <div id="app">
      <h1>Vue.js SPA</h1>
      <aside class="sidebar">
      <div class="content">

Second, we will create a Vue instance with the data property that we will place in the array with our posts. For now it’s empty, but soon we will put the data received from our server inside of the array. 
Once observed, you can no longer add reactive properties to the root data object. It is therefore recommended to declare all root-level reactive properties upfront before creating the Vue instance.

  export default {
    data () {
      return {
        posts: []

Also, I’ve added some styles to make our application look better.
The application code lives on the github.com .Just clone the repository and switch the branch by the step number to follow the application creation step by step, for example:

$ git checkout step-1

At this moment we have absolutely nothing to display in our navigation bar, so let’s get the data from our server. To do this I chose Axios a really easy-to-use HTTP client. You can also use any other convenient way for you like a Vue-resource or native fetch or even jQuery Ajax.

Step 2

Install the Axios

$ npm install --save-dev axios

Then import it into a component App and create a method getAllPosts() which we will make a request to the Drupal server and set it to the property post. Call the method in the hook created(), which will be called after the Vue instance is created and data observation has been set up.

import axios from 'axios'

export default {
  data () {
    return {
      posts: null,
      endpoint: 'https://jsonplaceholder.typicode.com/posts/',

  created() {

  methods: {
    getAllPosts() {
        .then(response => {
          this.posts = response.data;
        .catch(error => {

And now display all the headings of articles in the sidebar.

<aside class="sidebar">
  <div v-for="post in posts">
    {{ post.title }}

So far we have just displayed the names of posts but we can not see the full posts. Now I’m going to display the full post in the content section according to the chosen title in the sidebar. At the same time, I want every article to be available at its unique address.

Step 3

I will use the official Vue library vue-router to implement this. As it should be clear from the name, this library allows configuring routing for our application.
Install the package:

$ npm install --save-dev vue-router

To configure router go back to the main.js file. Here we will define the settings of our router and add it to the Vue instance.

import Vue from 'vue'
import Router from 'vue-router'
import App from './App.vue'
import Post from './components/Post.vue'
import Hello from './components/Hello.vue'


const router = new Router({
 routes: [
     path: '/',
     component: Hello,
     path: '/post/:id',
     component: Post,
     props: true,

new Vue({
 el: '#app',
 render: h => h(App),

In the route settings, we specify which component should be rendered on a specified path. Because the only component Post.vue will be responsible for rendering of each post, we don’t have to set the path for each post, all we need is to set a dynamic path.

path: '/post/:id'

This path has a dynamic segment :id which determines the specifics of our post. Herewith we have the access to this segment in component Post via this.$route.params.id. However, using $route in our component creates a tight coupling with the route which limits the flexibility of the component as it can only be used on certain URLs. Instead of this we can use the option props and set it to true. After that, the $route.params is set as the component Post props.
Now that we have a router created we can return to our application and add a few more lines to the template.

  <aside class="sidebar">
        v-for="post in posts"
        :to="{ name: 'post', params: { id: post.id } }">
      {{post.id}}. {{post.title}}
  <div class="content">

Here we have two components of vue-router: <route>r-link and <router-view>. The first one is the component for enabling user navigation in a router-enabled app. The second component is a functional component that renders a matched component for the given path.
It remains only one step. We need to display the contents of the post.

Step 4

Let’s go to the Post.vue file, which we will create a simple template in:

<template lang="html">
  <div class="post" v-if="post">
    <h1 class="post__title">{{ post.title }}</h1>
    <p class="post__body">{{ post.body }}</p>
    <p class="post__id">{{ post.id }}</p>

Then we need to set Vue instance settings for this component. Here everything will be very similar to the settings for displaying all posts. Declare the option props with variable id, which will get the number of our post. Next, define the data object the same as in App.vue:

import axios from 'axios';

export default {
  props: ['id'],
  data() {
    return {
      post: null,
      endpoint: 'https://jsonplaceholder.typicode.com/posts/',

Then create the method getPost() which will get only one post by an identifier and call it in the created() hook.

methods: {
  getPost(id) {
    axios(this.endpoint + id)
      .then(response => {
        this.post = response.data
      .catch( error => {
created() {

Almost done. If we run the application now, we’ll see that although the URL changes, we see the only post that was rendered first. The point is that for the different posts rendering we have the same component and Vue doesn’t need to recreate it because of the extra waste of resources and this also means that the lifecycle hooks of the component will not be called.
To fix this we just need to set a watcher for the $route object.

watch: {
  '$route'() {

Now it works exactly as it should. To get a production version of this application just run npm run build in your terminal. 

We built the simple single page application with Vue in four steps. We knew how easy to start your project with vue-cli. We figured out the concept of Vue single-file components which make your project more flexible and scalable. We learned how to fetch data from external API using Axios. And we saw how to configure routing with the vue-router. It is a basic knowledge, of course, but I hope it will help you to start using Vue.js with more power. If you have any questions, don’t hesitate to contact us.

Link to the GitHub project
The vue-awesome project
RESTful Web Services in Drupal 8: quick start guide
How to create a headless Drupal site

Sep 19 2017
Sep 19

Once upon a fall Saturday morning Drupal-minded developers got together. The reason was Drupal Global Training Day #5.

This event is for those who do not know anything about Drupal and for those who have just started to explore Drupal.

We unlocked a new location: it was Omsk State University. Also, we tried a new format of Drupal Global Training Day. Do you want to know how it was? Read on.

The junior developer Sasha Lopata told about the Drupal CMS, its history, competitive advantages and why it’s chosen to create a large number of websites in  “Meet Drupal in half an hour” session.

Another Sasha demonstrated the step-by-step process of creating a module in Drupal 8 and reported about the basic techniques and technologies.

The front-end developer Dima disclosed the interesting topic: "Theming in the Zen style: how to create a Drupal 8 theme". He showed how to manage the display of content on a Drupal site and what possibilities the platform under discussion provides.

The content marketer Iuliia wrapped the theory part up with the talk on the Drupal Community. She showed the participants how the Community lives, communicates and how its members collaborate and help each other.

Drupal Global Training Day #5: practice part

This time we tried a new concept of the conference. For the first time in Omsk was a workshop on creating Drupal sites in real time: this is a great way to consolidate your knowledge.

On the practice session the team lead Artyom and the developer Marina with the participants created their first own website and a module.

We asked Artyom about the practical part and how to organize it for Drupal newcomers.

And what he replied: “At the practice we created a module framework, routers, forms, and blocks. There was also an additional "home" task for the participants. In my opinion, in order to master some technology, you need to code a lot. Think up some interesting tasks for you that you and try to implement it. Start with the simplest things and gradually add new functionality. I recommend reading the Acquia docs "Building modules with Drupal 8" for beginner Drupal developers.”

Thanks to everyone who has found the time to come. This event happened, all because of you. Let’s create Drupal events together.

Drupal Global Training Day # 5 in Omsk

Sep 19 2017
Sep 19

«Working with ADCI Solutions has been a true pleasure as we have partnered on two Drupal conferences. In working with their Web Designer, Lera Tkacheva, we have been very impressed with the creative and quality designs. Not only have they delivered unique designs for the web, but have also produced print collateral and various other swag items that really brand our conferences beautifully.»

Sep 13 2017
Sep 13

DrupalCon Vienna

Hello, Drupal Community! Our team has prepared two BoFs for DrupalCon Vienna.

Our senior developer initiates the discussion on Drupal solutions for a higher education and science. The aim of this BoF is to gather Drupal experts and higher education representatives: that would allow us all to hear about the problems and the possible solutions from the first-person point of view. The BoF details

Another BoF is aimed at disclosing challenges we face while promoting and selling Drupal services, building the company image and communicating with a target audience. If we know the problems - we can find the solutions. The BoF details

Drop a visit!


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