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

Drupal 

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

Wordpress

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.

Drupal 

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

Wordpress

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

Drupal 

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.

Conclusion

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

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 

Conclusion

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

Introduction


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

Introduction 

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. 

Opigno

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

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. 

Certificate

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. 

Course

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.  

Quiz

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. 

Conclusion 

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

Introduction

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

Documentation

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.

Conclusion

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

Introduction

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
      [/,/post/1,/post/2,/post/3,/post/4]
    )
  ]
}

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'
...

Vue.use(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

airtable.com

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)

artlebedev.ru/demilie/site

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

readymag.com/repponen/20inventions/

 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

slack.com

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

dropbox.design

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

shop.baugasm.com

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

Introduction

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

Documentation

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.

Conclusion

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.

Requirements

  • 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

Introduction

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

Terminus

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.

Conclusion

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.

Benefits:

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

Example:

  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?

Fonts

  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

Introduction

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).

Resume

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

Multi-page Application

Pros

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

Cons

  • 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

Pros

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

Cons

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

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

modal_window.admin_settings:
 path: '/admin/config/status-message/modal-window'
 defaults:
   _form: '\Drupal\status_message\Form\StatusMessageSettings'
   _title: 'Settings for modal window'
 requirements:
   _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.

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

modal_window.admin_settings:
 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.

<?php
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 [
     'status_message.settings',
   ];
 }

 /**
  * {@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 == '')) {
     $this->config('status_message.settings')
       ->set('width', $values['width'])
       ->set('height', $values['height'])
       ->set('background', $values['background'])
       ->save();
   } 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).

modal_window:
 version: 1.x
 css:
   theme:
     css/modal_window.css: {}
 js:
   js/modal_window_jq.js: {}
 dependencies:
     - 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.

<?php

/**
* 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>
               </div>
               {{ parent() }}
               <button class="btn-close" id="modal_close" type="button" aria-label="close">
                   &times;
               </button>
           </div>
       </div>
   {% 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.

Details

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. 

Details

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. 

Details

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.

Tools

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.

Vue-cli

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.

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

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.

<script>
  export default {
    data () {
      return {
        posts: []
      }
    }
  }
</script>

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() {
    this.getAllPosts();
  },

  methods: {
    getAllPosts() {
      axios.get(this.endpoint)
        .then(response => {
          this.posts = response.data;
        })
        .catch(error => {
          console.log('-----error-------');
          console.log(error);
        })
    }
  }
}

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

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

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'

Vue.use(Router)

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

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

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.

<main>
  <aside class="sidebar">
    <router-link
        v-for="post in posts"
        active-class="is-active"
        class="link"
        :to="{ name: 'post', params: { id: post.id } }">
      {{post.id}}. {{post.title}}
    </router-link>
  </aside>
  <div class="content">
    <router-view></router-view>
  </div>
</main>

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>
  </div>
</template>

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 => {
        console.log(error)
      })
  }
},
 
created() {
  this.getPost(this.id);
},

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'() {
    this.getPost(this.id);
  }
}

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!

Sep 05 2017
Sep 05

Table of contents

  1. Preface
  2. Security principles
  3. Key security objects
  4. Server (common settings)
  5. Web server
  6. PHP
  7. Database
  8. Drupal
  9. Conclusion
  10. Useful links

Drupal is an open-source content management system with a quite complex architecture. It also has a strong security model. Thanks to the big community of developers there is a lot of informative documentation and useful examples of the proper configuration of Drupal website security and keeping this configuration up-to-date.

It should be kept in mind that Drupal is the only one part of the software which is needed to run a website. To protect the whole system from hacking, we need to take care of an entire set of software. It includes some common server settings, the configuration of a web server, PHP and a database. Also, the proper configuration is required for any additional software on a server.

This article focuses on discussing the mentioned key points. It provides some clues which should help the server and website administrators to audit the security of the entire system. We should understand that it’s impossible to create a system which is absolutely safe but if you stick to some common principles, it will help to support an indicator of the safety of your system at the sufficient level.

Security for Drupal and related server software

Let’s start with the common security rules. Most of them are applicable not only to the Drupal development and supporting the security of the relevant for the Drupal website functioning infrastructure but also in many other cases:

  • Use widespread solutions that are developed by a large community of users. It can be well maintained open-source libraries, popular Linux distributions and so forth. Always check the integrity of the downloaded code.
  • Limit usage of any additional software. Install new software if you really need it and there is no ability to use the similar functionality from already installed packages. Uninstall all the software that you don’t need.
  • Avoid writing a custom code. Before you start doing it, think carefully whether you can avoid this. A real situation related to the Drupal development is the search for ready solutions on drupal.org before writing custom modules.
  • Deny an access by default. You should grant an access to objects in your system only when it’s necessary.
  • Add roles with required permissions. Each role must be well documented. In that way, it should be easy to support and extend a whole roles/permissions system.
  • Do not use superuser privileges. On Linux-based operating systems only use the root access when required and do this through sudo. In other words, you shouldn’t be logged in as root.
  • Document everything. First of all, it’s about any customizations of your system. It’s quite easy to forget some important details and they can be lost during the system update.
  • Do periodic security checks of your system. You should carefully analyze all suspicious cases and react on them.
  • Take care of backups. You must always have an ability to revert the system back to any of previous states. Besides, you need to be sure that the system makes the workable backups.
  • Do not open the access to your server from the Internet before the server is properly protected.

These principles can be applied to any system, regardless of a set of software and hardware that it uses. However, there are more specific key points what we will discuss further.

In addition to Drupal to run a website, it’s necessary to configure PHP, a web server, and a database server. You may also want to install some software for extending search functionality, for working with cache and so on.

As you see there is a lot of things that require the proper configuration and regular maintenance. Based on said above, we can distinguish the following objects for which we need to ensure security to some extent:

  • Server (common settings)
  • Web server
  • PHP
  • Database
  • Drupal

Security of any service available on the Internet begins with a basic configuration of a server. For the Linux-based servers it can include the following steps:

  • Change the login process to the server
  • Setup a firewall by using iptables

Change the login process to the server

By changing the process of logging in to the server, I mean a certain modification of the default server settings. The main goal is to make this process different from the standard one.

For example, any Linux-based system has a superuser that is called root. An attacker can try to pick up a password for this user. However, if a server administrator turns off root logins, such attempts will be unsuccessful. Instead of the root user, we could create a new one and then grant him the necessary permissions.

Most of the discussed changes are related to ssh settings. They are usually located in the /etc/ssh/sshd_config file. Take a look at this configuration:

Port 2345
Protocol 2
PermitRootLogin no
PasswordAuthentication no
UseDNS no
AllowUsers user

It allows a user with a name user connect via ssh to the server by using 2345-port (not standard). It also disables root logins and a password authentication.

Disabling the password authentication is an important step to improve the security of the whole system. The passwordless authentication is more secure. To log in to the server you need to generate an ssh key-pair on a local machine and then copy a public key to the server.

Setup a firewall by using iptables

The iptables utility is the default firewall for Linux systems. It can be used for managing connections to the ports that you specify. If we want to keep the website on the server, in additional to the ssh port it will be necessary to open http and/or https ports.

By default, there are no rules on a clean operating system. Typing the sudo iptables -L command (Ubuntu) returns the following entries:

Chain INPUT (policy ACCEPT)
target     prot opt source               destination

Chain FORWARD (policy ACCEPT)
target     prot opt source               destination

Chain OUTPUT (policy ACCEPT)
target     prot opt source               destination

This means that the server accepts anything from anyone on any port (policy ACCEPT). Let’s try to open the necessary ports and refuse connections to other ports for an input chain.

sudo iptables -A INPUT -p tcp --dport 2345 -j ACCEPT
sudo iptables -A INPUT -p tcp --dport 80 -j ACCEPT
sudo iptables -A INPUT -p tcp --dport 443 -j ACCEPT

These commands accept connections to 2345-, 80- and 443-ports. Despite this, we still have no other restrictions for other ports. So, you need to add a rule to an end of the input chain that will refuse all inappropriate packets.

sudo iptables -A INPUT -j DROP

That’s all. It should be borne in mind that the settings above may vary greatly depending on a chosen operating system. The main goal here is only an explanation of the basic principles. Be careful when changing network settings. Sometimes it can make a remote server not available for any connections.

A few general guidelines for setting up a web server. Applying these rules is very important for the functioning of your website. By using server vulnerabilities attackers can manipulate website files, upload malicious scripts and run these scripts somehow.

Access to the website files

There is the main rule - the website files should be editable by a non-root user and shouldn’t be writable by a web server user. The Drupal files/ directory in some cases can be available for writing by the web server’s user. The detailed information on securing file permissions and ownership can be found in the Useful links block at the end of the article.

Restrict an access to some pages on the web server level

Sometimes it may be useful to restrict an access to several pages of the website on the web server level. For example, in a situation when you have a demo website or a website without a registration functionality. So, you can protect the /user and /admin/* routes. For the Apache web server it can be done by using the mod_authz_host  and mod_rewrite modules. Keep in mind that using a http authentication isn’t a secure approach. Thus, the described method is more applicable in a given case.

Remove the unused web server extensions

All additional software on the server is a potential security risk. So, you should minimize a set of necessary tools. If you don’t need something, just remove it.

The same is applicable for the web server. Apache and Nginx web servers have a lot of additional extensions which can be used for some purposes. Carefully check a list of enabled extensions and remove all not used extensions.

Use HTTPS

Usage of the HTTPS protocol makes the website and an access to the private users’ data more secure. Nowadays it’s an absolutely impossible situation when some online stores don’t use encryption for their payment transactions. Moreover, Google sets HTTPS as a ranking indicator. It means the websites which don’t use the HTTPS protocol but at the same time process, some important information (credit cards details, payment transactions, etc.) get a negative impact on search rankings.

An ideal case is if you apply encryption for all websites that have an interaction with users. An obvious example of such an interaction can be the login and registration forms. Users type their passwords to these forms. Even if these passwords look invisible (like black circles in a field) in all browsers, they are passed through a network in an unencrypted form. So, if attackers have an access to the network, they can easily intercept the data entered. Quite often users have the same passwords for different services. This means that access to other services can also be compromised.

HTTP Authentication

It should be clear in what situations you can use an HTTP authentication. Most often you need it to protect an access to a staging website and disable indexing of this website by search bots. However, the HTTP authentication is inherently insecure. It doesn’t use any encryption algorithm. So, the traffic between your browser and the website isn’t encrypted and an attacker can get the access to the website just by copying the “Authorization” HTTP header and sending it the web server.

Also, it’s strongly recommended to keep the htpasswd file outside of a document root. Set read only permissions for this file (440).

PHP like other parts of the server infrastructure can contain vulnerabilities. Here much depends on the settings of PHP itself and on what version of PHP is currently used. Of course, you always need to check all available updates and keep PHP updated. However, in some situations, it can be quite difficult or even impossible.

In general, all the work to optimize the safety of the operation of PHP on a server can be divided into three parts:

  • Periodic update of PHP version
  • Avoiding the use of an insecure code, functions, etc.
  • Optimizing PHP settings

Periodic update of  PHP version

It’s obvious thing but, as I mentioned, in some cases updating can be quite difficult or even impossible. It can happen in a situation when you have a lot of legacy code in your application (it doesn’t work in the new PHP version) and the current business strategy doesn’t allow you to spend time on updating this code because it’s time-consuming operation. In such a case, you can try to apply some recommendations which are described below.

Avoiding the use of an insecure code

Writing a secure code is an important step to the whole application security. You should spend some time on a regular basis for reviewing all the custom code that you have. Besides, no one can give a guarantee that the third-party libraries do not contain any vulnerabilities. As I mentioned, even PHP itself can have problems with security  (using insecure functions, buffer overflows, etc.).

To solve these problems there is a good solution called Suhosin which can help you to get rid of many security issues. Suhosin was designed to protect servers and users from known and unknown flaws in PHP applications and the PHP core. It consists of two parts. The first part is a patch for the PHP core which provides a few low-level protections against buffer overflows or format string vulnerabilities. The second part is a PHP extension that implements some additional protections.

Suhosin is a really powerful tool for protecting your server against a lot of vulnerabilities. Unfortunately, it isn’t available for PHP 7. In fact, the work on Suhosin7 is being carried out, but it isn’t finished yet. The author doesn’t recommend using Suhosin7 on production servers.

Optimizing PHP settings

The two easiest steps that we can take in order to optimize the PHP security configuration are disabling unused modules and minimizing an amount of information that users can get about a current PHP installation.

To see all of the compiled PHP modules, run the following command:

$ php -m

It’s recommended to use only the most necessary modules to increase security. Carefully check the entire list and decide what modules you don’t need.

Protection of PHP from hacking is not only an accurate programming but also hiding information about a system. Take a look at this string in the php.ini file:

expose_php = Off

Make sure that this parameter is turned off. Otherwise, PHP will send the installed version in response to all requests in the X-Powered-By header.

The same thing applies to the PHP errors on a website. They can provide some additional info about your server (a type of the web server and its version, the structure of directories, etc.). So, it’s highly recommended to disable this feature on production servers.

display_errors = Off
log_errors = On
error_log = /var/log/httpd/php_scripts_error.log

The settings above allow you to turn off displaying errors occurring all around the website. Also, they activate logging of errors into the specified file.

Those were preliminary steps that will help you increase the security of using PHP on your server even without any significant modification of the system. Now let’s talk about some specific restrictions that you can add to the PHP configuration (php.ini file):

  • Disable file uploads
    file_uploads = Off

    But if such a function is necessary, it’s better to limit a file size.
    file_uploads = On
    upload_max_filesize = 1M

  • Control system resources
    max_execution_time = 30
    max_input_time = 30
    memory_limit = 50M

    You can specify the maximum execution time for each script, the maximum amount of memory and the maximum data read time.
     

  • Disable PHP functions which allow scripts to refer to other URLs
    allow_url_include = Off
    allow_url_fopen = Off

    If allow_url_fopen is enabled, PHP can use file functions such as file_get_contents. With it, the script can download files from remote servers.
     

  • Disable dangerous functions
    disable_functions=exec,passthru,shell_exec,system,proc_open,popen,curl_exec,curl_multi_exec,parse_ini_file,show_source

    Before disabling, make sure that your website doesn’t require any of them.

  • Restrict an access to the file system
    open_basedir = "/var/www"

    The open_basedir directive allows you to set a directory in which PHP can access files using functions such as fopen, file_get_contents, etc. If the file is outside of this directory, PHP will refuse to open it.

  • Check the session path
    session.save_path = "/tmp"

    Make sure that the session path is outside the website root directory. Also, it mustn’t be readable or writable by other system users.

What measures you will take to ensure a database security depends primarily on the infrastructure of your application. For example, a Drupal’s database abstraction layer gives you an ability for choosing between different databases. Out of the box, it can be MySQL, SQLite or PostgreSQL. Also, Drupal supports popular MySQL forks such as MariaDB and Percona. You should understand that each system may have different specifications regarding the security.

Also much depends on the fact where you keep the database. The easiest way (in terms of security) is installing the database on the same server where you have a website. However, this approach can have an impact on the whole system’s performance and for this reason server administrators may decide to move the database on the separate server. This is especially true for high-loaded applications.

The first thing that you should do after finishing with the configuration of the server environment is checking if your infrastructure is robust enough and it can’t be easily broken by a DoS attack. In fact, even at the peak of its workload, the server should have some reserve of resources.

As I mentioned before database security settings can be very specific depending on the chosen database server. Within this article, let's look at some general measures:

  • Database access
    If the database is installed locally, you can disable the access to it from the network. If your database is on the separate server, it should be possible to set what IP address it will listen to. In case of sharing LAN between the web server and the database server set only a LAN IP address (not accessible via the Internet). It can be done by editing the my.conf file. Below is an example of the configuration when you use the same server for the database and the website.
    bind-address=127.0.0.1
  • Databases, users, and permissions
    Review your databases, users, and permissions in order to find any security bottlenecks. Don’t give users more rights than they actually need.
  • PHPMyAdmin and similar tools
    Make sure that you disable graphical tools for working with the database after using them. If you plan to continue using these tools, try to make an access to them as difficult as possible. For example, you can restrict an access to PHPMyAdmin by .htaccess and allow the access from certain trusted IP addresses. Besides, instead of using server applications you can try some local instruments like MySQL Workbench.

Drupal has a quite complex architecture. To ensure the safety of this complex system, it’s better to divide all the related work into small parts. During this operation you will encounter a set of tasks that need to be done only once (set file permissions, configure the settings.php file, etc.). There will be some tasks that require periodic attention (update Drupal and modules). Perhaps others will require you to work closely with the Drupal community.

Here are the two key moments that you should keep in mind:

  • Ensuring the Drupal security isn’t an easy thing but it’s very important for any website. So, you must definitely work on this.
  • The security requires a constant attention from your side.

Files

Make sure that a web server has no writing permissions on Drupal files. Writing permissions may only be needed for cached files, uploads, sessions and temporary directories. The following command grants a write access to the public files directory (Ubuntu/Debian):

    $ chown -R www-data:www-data sites/default/files

If your website allows to upload files, pay attention to how you can secure the process of working with these files. Allow only certain file types to be uploaded. Relatively safe are text files and pictures. However, this does not change the fact that users can upload malicious code like a file with a .jpg or .txt extension. To avoid this problem you can try to install the ClamAV module which scans uploaded files for viruses and other malicious code.

The settings.php file

After the initial install, make sure that the settings.php file has no write permissions. Information about this can be found on the Status report page (admin/reports/status in Drupal 8).

In the settings.php file you can set one important option which prevents your website from thinking it is someone’s else. This type of attacks is called HTTP POST Header attacks. To protect a Drupal 7 website against them add the base URL parameter to your settings:

    $base_url = 'http://www.example.com';

The similar thing in Drupal 8 is the trusted hosts array:

    $settings['trusted_host_patterns'] = [
 '^www\.example\.com$',
];

To generate an extra random data Drupal uses salt. Salt is also specified in the settings.php file. For enhanced security, you may put this value to some file which is located outside of the website root. In Drupal 7:

    $drupal_hash_salt = file_get_contents('/home/example/salt.txt');

And in Drupal 8:

    $settings['hash_salt'] = file_get_contents('/home/example/salt.txt');

Error logs

Drupal provides a mechanism for monitoring a status of your website. Here I mean Recent log messages and Status report pages. Try to check these pages regularly and fix issues found. The Status report page is very useful, especially after a website installation. For example, it can inform you if you forgot to add the trusted hosts settings or there is a write access to the settings.php file. Some types of suspicious activities can be traced simply by looking at the Recent log messages page. As an example imagine a situation when you notice a surge in a registration of new users.

Don’t forget to disable the display of PHP errors. They should not be visible for ordinary users. Although you may see these errors on the Recent log messages page keep in mind that it doesn’t catch all PHP errors. So, check your server log files sometimes.

Changes in Drupal core and contributed modules

This part is about the possible hacks of the Drupal core and contributed modules. Actually, it’s a well-known fact that new developers may cut corners and put their code or some changes directly into Drupal core or the installed contributed modules. This can potentially lead to unpredictable behavior of Drupal itself, as well as to the appearance of vulnerabilities.

To veer away from these problems I recommend to use the Hacked! module. This module scans the currently installed Drupal, contributed modules and themes and compares everything with appropriate versions from drupal.org. If you have the Diff module installed, Hacked! will inform what exact lines were changed. All this makes the Hacked! module a valuable analytical tool for any website.

Users and permissions

Drupal has an intuitive and customizable permissions model. A permission is the simplest element of such system. A set of permissions can be grouped by a role. Then this role may be assigned to the particular users. New permissions and roles may appear during an update of Drupal core and contributed modules. You should periodically check (for example, after updating) which roles are assigned to each user on your website and what permissions are included in these roles. Try to minimize sets of permissions that are included in each role. Don’t give users more permissions than they really need.

A good security practice is a use of a non-standard username (e.g. not admin or root) for user/1 because an attacker will check standard variants in a first place. For greater security, it’s even possible to completely disable the user/1 account.

Another good thing is checking activities of users on your website and lock inactive accounts. The User Expire module provides an ability to define a date on which a specific user account will be locked. Also, it can lock accounts that are inactive for a certain period of time.

Useful modules

Depending on your needs you may find a lot of useful security modules on drupal.org. Here is just a brief list some of them:

In this article, we reviewed a number of practices aimed at securing your website. The review also covers all parts of the necessary infrastructure - from the common server settings to the specific use cases of some Drupal modules.

Many people neglect to monitor the security of their sites and server infrastructure until there are obvious problems. Although even observance of a number of simple rules would help to avoid their appearance. So be patient and always keep an eye on the security of your system. Good luck!

  1. The detailed information on securing file permissions and ownership
  2. The mod_authz_host module
  3. The mod_rewrite module
  4. Suhosin
  5. The ClamAV module
  6. Salt
  7. The Hacked! module
  8. The Diff module
  9. The User expire module

Get a security check

Aug 30 2017
Aug 30

Drupal has changed many lives for the best and we want to show newcomers how. Share your story with us!

Record a short video with a hashtag #Drupalchanges and tell what positive changes Drupal brought to your life. Did you change your career? Cool! Met new friends, moved a bigger city? It's huge!

[embedded content]

Post the video on Twitter and/or Facebook until the 7th of September and we will compose your stories altogether so everybody can use the video!

Let's inspire together!

Aug 29 2017
Aug 29

Introduction

Hello there! This little website audit checklist will get you directly to the topic itself: checking a website’s health does not need any reasoning behind it. Don’t be misled by Google: the website audit is not only about SEO, but about such aspects as design and UX, the lead generation process at your website and ease of administering/editing the website, content of the website and an interaction with social media (borrowed from HubSpot approach). We’ll go through all those aspects above and see what functional areas we can and should improve. This article is written by a content editor for content editors, website admins and website owners who need to explain to their tech colleagues what’s wrong with their website.

Be lazy - we’ve done half of the job for you!

Little tip before you start

We understand that your website probably has dozens and hundreds of web pages. It’s not possible to check them all at once, in a batch - you have other things to do after all. Web auditing is important, but choose up to ten pages that drive your business to its goal: the main page, a contact page, pages of the most popular products/groups of products. Check them first and make sure they work for you 24/7.

Web auditing

Design and UX audit

The very first subtopic we want to cover is website design and its ease of use for website visitors. Your website design welcomes your users and makes them either escape or stay and do what they came for at your website. A few years ago (a human being’s basic psychological features barely have changed since then) Google held a research and it was revealed that it takes less than a second to judge website’s attractiveness: those research participants assessed more complex websites as less attractive. What does it all have to deal with proper functioning?

The thing is, a brain prefers thinking of stuff that is easier to comprehend. Forget about complex designs not helping a website’s guest then. Or lose a newcomer.

Web design and UX audit checklist

Web design and UX checklist

  1. A page structure is easy to distinguish: headers, titles (H1-H6), footers, content help a user navigate a page.
  2. If appropriate, consider using design breadcrumbs and footer links. Use heat maps to see if your website’s visitors click the footer’s links first. Check an SEO part of this article to learn what dangers you might face.
  3. Content density does not repulse a visitor: it’s divided by headings, pictures (that must help understand content), white space.
  4. Design leads the visitor to CTA links and buttons: interactive elements, hovers, etc. Some handy design trends of 2017 can be found here.
  5. CTA is placed within the first ⅓ rd of a user’s screen.
  6. Web design aligns with the company’s brand.
  7. The website renders well on all devices: users can easily do what they came for on desktops, mobiles, tablets and so on.
  8. Check all visual elements of your design: background illustrations share the same style for the sake of a smooth transition between pages; all design elements (logo, favicons, headers, typography, colors used) don’t contradict each other, too.

If you followed the instructions above, you can see these figures changing:

  1. A level of bounce rate decreases since the navigation is clear and users understand what to do next.
  2. A session duration should grow.
  3. Users execute the main CTA.

Lead generation process audit

Lead generation process follows the design and UX topic. As we already mentioned in the checklist, the design must help to convert visitors into leads.

Lead generation process audit checklist

  1. A page has a clear call-to-action (CTA) block: a button, a link - whatever converts the best.
  2. No more than 3 calls to action.
  3. CTA must be visible and reachable for users (for instance, don’t hide a CTA in the footer if your website’s visitors don’t tend to scroll the whole page.
  4. If a website’s visitor changes his/her mind and leaves a particular CTA unfinished (for example, a contact form left unfilled completely), you should give them another opportunity to dispel a doubt. You can show them a pop-up offering a free consultation/a knowledge base to get into details/asking a reason for leaving. The pop-up is a rather tricky method of communicating with users, but wisely used - it works. Learn what annoys the website’s visitors, when it’s appropriate to show the pop-up, how much time should pass before the pop-up is shown, etc.

Likewise in the previous block, if you followed the instructions above users would execute the main CTA and if something disrupts them - there’s a tool that helps users to complete the action. Conversion must grow, if it doesn’t, you go back to the web design and UX section and check what’s wrong.

Lead generation

Content audit

Let’s assume a page structure is wisely designed and users understand what actions he/she ought to perform to get what they came for. A menu does navigation work perfectly, and all that is left - not to repulse the users with content issues. They do read it, they really do!

Content audit checklist

  1. Content adheres to the page goal: if it is a contact page - content must stick to the ways the user can contact you. It’s a very obvious, yet a very common mistake. Keep the page goal in mind when filling it with content.
  2. Content is logically structured and doesn’t confuse users. Use Jakob Nielsen’s “Inverted Pyramid”: place the most important info first, then proceed with supporting details, and only after all add a related information.
  3. No spelling and grammar mistakes.
  4. No extra content: only that drives a guest to CTA.
  5. Likewise, design in general, you should pay attention to content structure and how it’s divided: blocks, bullets, white space and illustrative pictures.

Content improvement also facilitates the main goal execution: CTAs are being clicked/filled in/completed.

SEO audit

A search engine optimization part makes your content visible to a wider audience. Without specific terms, there are many technical operations you can do so that your content is found by more and more people. Some changes, like editing headings and content itself, inserting links can be implemented without programmer’s supervision, others require the help of a specialist.

SEO audit checklist

  1. Set up a correct tracking tool to track what’s going on with your website: keywords, traffic, entrance pages, exit pages, etc.
  2. Put appropriate content tags: title tags, description tags, image tags, meta tags.
  3. Use key words and their synonyms in the headings, in the text itself.
  4. Eliminate broken links at your website.
  5. Make sure your content doesn’t have references to other sources at the very beginning: this way readers won’t leave your website too soon for Google Analytics or other tools to count it as a bounce and lower a website’s ranking in search.
  6. Think about using internal links on your website: in the footer, in content. Don’t party hard there.  Such internal links must help a user to continue his/her journey. If those links are inserted automatically, with the help of a bot, for example, Google can punish you: it treats links jamming into every matching word as a manipulation. You can find the results of such cross-linking in the end of the article. 
  7. You’ve given enough attention to link building and there are other websites that refer to yours. Thus Google treats your website as an authority one and ranks it higher. Of course, if websites that refer to your website are trustworthy :)
  8. Tune the server files that influence how search engines access your website and index it: .htaccess, robots.txt, sitemap.xml. This step can be pretty complicated for setting up without programmer’s supervision, but try not to omit it. Google must crawl into and analyze your content correctly!

What SEO gives you:

  1. First of all, you understand what drives your traffic and what your traffic sources are. Then you impact them!
  2. You understand how users find content similar to yours and now an organic traffic grows because you use tags, key words wisely.
  3. A level of bounce rate decreases.
  4. A visitor spends more time on your website than before due to internal linking.
  5. After all, your ranking must be higher than before an SEO tuning.

Social media presence audit

Now an SEO part is fixed and your website is getting higher in a search. What else can help? Right: a big link mass and references from other resources.

Social media presence audit checklist

  1. Your company/brand is present at social networks: a public page, a group.
  2. You keep referring to your website at profiles in social networks and make sure content has a wide reach.
  3. Social media icons are embedded into website’s footer or another appropriate place.

Having everything done right, you will see a traffic from social networks growing.

Little tip before you go

Ease of administering/editing the website

When you’ve done everything for a user, consider checking how easy it is to edit a website and perform everyday routine actions. There’s no particular checklist for that because it mostly depends on a CMS you use. Make sure administrators of your website can create content pages without the help of a programmer. Make sure admins can present content the right way, too: they can upload images, embed videos, align a text.

Farewell

Now you’re set to conduct your first own website audit. Don’t omit steps and soon you’ll see how better the things are going. If you know the things that we might have missed in this guide or need our advice - let us know. Happy auditing!

Useful links

  1. Google research
  2. Cognitive fluency
  3. About excessive cross-linking
Aug 16 2017
Aug 16

Joining a new company is a complex and difficult process even if it is a positive move. New environment, new people, new responsibilities can shake everyone’s world and make one feel uncertainty. That is why many companies create adaptation programs in order to ease this process for new employees.

New employees adaptation: Drupal team experience

We at ADCI Solutions also care about each team member and strive to ensure that everyone feels safe and sound at work. Therefore we put efforts into a good adaptation program development. Most people in our team start from a position of an intern and make all the way up the career path from that point. Sometimes it means that being the intern in our company is the very first workplace for the person. We value such growth inside our company and try to make it comfortable for newbies to work with more seasoned team members.

The first point of adaptation in the company is a job interview. Surprising, right? But it is so. During the job interview, a potential employee receives the first impression about the company and its corporate culture and sets the first expectations, too. Researchers this stage anticipatory socialization and a decision for the job. Therefore it is very important for an interviewer to be highly transparent about the job tasks and a working atmosphere. Otherwise, after being hired the person will experience the emotional burden caused by reality mismatch.

We approach the stage of the interview after the candidate finishes the test tasks and his/her programming skills are confirmed. This means that on the interview we only check if this person matches the team spirit and fits the corporate culture.

When the person is hired and comes to his/her first working day we welcome him/her with a small booklet with our traditions, other corporate culture rules, and opportunities such as English classes, the bonus system, educational events and so on. This helps the new employee to adapt to a new environment knowing whom to ask questions and how to behave in a particular situation.

From the moment of employment starts the stage of introduction to job duties. All of our new interns and employees have a team lead and a mentor who guide them through their working integration. This person provides the necessary education and helps with getting to know other team members. After the internship is finished comes the stage of individual strategies development to manage adaptation issues. It is connected with both professional and social integration which finalize the employee incorporation and adaptation. To achieve that the three following points should be present:

  1. the new employee should be familiar not only with direct duties but also with related responsibilities, the scope of competence and other ways to prove him/herself;
  2. the new employee should perform his/her first results;
  3. the new employee should understand the values of the company and behave accordingly.

In order to provide the new interns and employees with necessary information about work and the corporate culture we not only delegate it to mentors. We also organize special team buildings that are attended by team members who work less than half a year but the rest of the team is also welcome. The agenda of such team building includes, first of all, getting to know each other better. It is crucial since the company grows bigger and we want to make sure that people know everyone’s name, hobby, etc. The other part is a team building itself. Here we accomplish some exercises to get bounded and feel the team spirit. And the final part of the agenda is a corporate culture presentation where we openly speak about unclear moments and try to be on the same page as the team.

Team-building in a web team

Besides such special activities, we have several permanent things that help newbies to adapt. These are common lunches, Xbox, and board games playing, corporate parties and, of course, group chats.

Since we have included these activities into the adaptation process new team members seem to be more confident and open. However we think that there’s no limit to perfection, therefore we also developed a short survey for team members who work more than half a year. This survey includes a question on how easy or hard was the process of adaptation in the company and what would help to speed it up.

We are still in process of improvement of our adaptation system. And hope that we’ll find the ideal way to make each day of our team members memorable.

Aug 02 2017
Aug 02

Over the past few years, e-commerce has transformed how people buy and sell online. The Internet provides a quick and easy way for people to buy things without visiting an offline store. As the demand for online purchases grows, the offer of commerce templates also gets higher. Many website developers offer attractive ready-to-use templates.

Lots of things affect the success of your online store and the way you sell it online: it’s an interface, an amount of time it takes to find a product and purchase it and many others. It is very important for small businesses and retailers to a have beautiful, yet functional and responsive website.

For this article we chose ten Drupal e-commerce themes which can be used for different kind of stores. Enjoy reading!

Rhytm

The Rhytm theme

The Rhytm theme is the first in our top. This is a simple and modern professional theme for different kinds of businesses. The highly customizable and easy to use, this responsive theme will help you to manage your website in several clicks. Rhytm is a multipurpose theme and it has strong well-designed shop sections.

Price: $58.

Brilliant

The Brilliant theme

Brilliant is a Drupal theme which looks clean and nice. It will be suitable for different kinds of shops, but the best way is to use it for the fashion store. Due to light pastel colors and the way a white space is used the overall look of the theme is clean and appealing. The Brilliant theme looks good on all devices from desktop to mobile.

Price: $58.

ADCI Commerce theme

The Commerce theme by ADCI Solutions

The Commerce theme by ADCI Solutions is the best way for you to display and sell your products, whatever you sell. It is designed to make your online selling fast, easy and inexpensive. The theme layout always fits perfectly with  every screen no matter what the size it is: a desktop, a tablet, a mobile phone, etc. It’s the best way to start your business and showcase your projects or sell your products.

Price: free.

Marketplace

The Marketplace theme

Marketplace is a Drupal theme which has a nice and trendy appearance. A minimum of colors, lines and slight shadows make a positive impression. The usage of negative space looks splendid. This theme will look good on any device. Especially recommended for all kinds of retailers.

Price: 63$.

Flatize

The Flatize theme

Flatize is a Drupal theme mostly suitable for a shopping site. The design of the theme is very functional, there is nothing useless in it. Product page is well designed, the process of adding goods to the cart is very convenient. In addition, a variety of blocks in the layout of the pages and the correct usage of accents will not let buyer get bored and make the purchase process as tight as possible.

Price: 58$.

Dmart

The Dmart theme

The Dmart theme is suitable for almost any store, whether it is a technology or furniture one. Although unusual colors and textures are used in this theme, it looks professional and minimalistic. It has a well-implemented search by price, brands, category and other parameters. Also this theme is optimized for different screen resolutions.

Price: $58.

SimpleGreat

The SimpleGreat theme

This template is perfect for businesses that sell such products as watches, jewelry and other accessories. The design of the theme is minimalistic, with dominance of gray and white colors. Also a parallax effect is used in several blocks. Responsive theme design allows to display your store well both on mobile devices and in desktop versions.

Price: $58.

Flatastic

The Flatastic theme

The Flatastic theme gives you an excellent opportunity to create a e-commerce website, it can be retail, fashion, interior or almost any other field. This is generally a white theme with bright accents, it looks nice and creates an impression of action and flexibility. The Flatastic theme will let you organize all content efficiently and provide you with professional features. The design is responsive and retina ready.

Price: $58.

Big C

The BigC theme

BigC is a brand new Drupal theme for almost any kind of business. It looks professional and modern, it has a flat design and you can create a good shop using this template. It has a classic structure with all needed blocks to make your shop nice and user-friendly. And a responsive layout will help customers to buy goods from mobile devices.

Price: $49.

Go shop

The GoShop theme

GoShop is a Drupal theme for commerce. It has an attractive layout and a good structure. It also has a nice typography with unusual font pairings. The whole look tells us that this theme is better to use for sport goods such as bikes. Goshop fits all possible devices smoothly.

Price: $48.

Conclusion

We’ve observed 10 Drupal themes which you can use to sell products online.

These are the kinds of themes suitable for different business purposes. Most of them are good for fashion stores. I hope you enjoyed the collection. These themes help to create an appealing web project, that's why if you look for the website solution, this article is to help you in your search.

Useful links

  1. The Rhytm theme
  2. The Brilliant theme
  3. The ADCI Commerce theme
  4. The Marketplace theme
  5. The Flatize theme
  6. The Dmart theme
  7. The SimpleGreat theme
  8. The Flatastic theme
  9. The Big C theme
  10. The Go shop theme

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web