Many of the clients we help with developing web applications have been asking about General Data Protection Regulation (GDPR), the European Union’s new suite of data privacy law in 20 years. So we decided to provide information as clear as possible about - How does GDPR relate to a Drupal website? How to make Drupal site GDPR compliant? Are there any modules that will help me with it?  

Unsure about GDPR? Let’s dive in to the basics.

According to EU GDPR, GDPR is “designed to harmonize data privacy laws across Europe, to protect and empower all EU citizens data privacy and to reshape the way organizations across the region approach data privacy.”

The new regulation, which will come into effect on 25 May 2018, applies to data collected about EU citizens from anywhere in the world. As a consequence, a website with any EU visitors or customers must comply with the law. Have a look at the publication of the regulations in the Official Journal of the European Union in order to have a better understanding. The penalty for non-compliance can be 4% of annual global turnover, up to a maximum of €20 million.

So how does GDPR relate to your Drupal website?

Any information, such as name, address, email address, social security number, IP address etc., related to identifying a living person directly or indirectly is classed as personal data. Since most companies gather users information through forms for email marketing or CRM extensions in this case their site will be affected. Further, any form that deals with the commerce of any type is affected.

Steps to make your Drupal site GDPR compliant

• Data collection and storage: Article 12 of GDPR, Right of access, states that before collection of data places or before a user submits the form, they must be aware of that the form on your Drupal site is collecting their personal information with the intention to store it.

• Inform the user: Users should be aware of which of their data will be stored and use, how, where, and for what purpose. To make things simple in your form, fully disclose your data collection and storage practices in the privacy policy.

• Keep user data organized and accessible: According to Article 17 of GDPR, Right to erasure (right to be forgotten), users must have an option to erase personal data, stop further collection and processing of the data that concerns him or her. At the same time, users should be able to download their personal data for which they have earlier given permission. Further, on request, companies should be able to provide a user with a copy of all personal information they have on them, free of cost within 40 days and delete the info on request.

• An open channel for users request: Your Drupal website must have a simple form for consent withdrawal and/or request to view on your privacy policy page to allow users contact the company in an easy way. Setting up an email action that sends the notification to you each time the form is submitted is the best way to know happenings.

• Communicate privacy information: Review your current privacy policy and mention clearly for making any necessary changes after the implementation of GDPR. under the new regulation, you need to explain how you process the data, data retention periods and that individuals have a right to complain if they think there is a problem with the way company is handling their data.

• Individuals’ right: Through Drupal’s GDPR module, we ensure your website includes the following rights - the right to be informed; the right of access; the right to rectification; the right to erasure; the right to restrict processing; the right to data portability; the right to object; and the right not to be subject to automated decision-making including profiling.

• Breach notification: In case your Drupal website ever experience a data breach of any kind, the information on the same must be communicated to all of your users within 72 hours of becoming aware of a breach.

• Google Analytics: As per the law, if you are using Google Analytics it means you are data controller, and can decide which data should be sent to Google Analytics and not. In order to be GDPR compliant with Google Analytics, you need to follow certain guidelines, like: 

  Auditing data for personally identifiable information (PII)
  Turning on IP anonymization
  Auditing collection of pseudonymous identifiers (hashed emails, user IDs)
  Updating contract, privacy policy on the website
  Building an opt-in/out capability

• Modules: While developing a website, we ensure that your site is integrated with different auditing modules, such as for performance, security, or a general review to check the overall status of the site. A security audit on your Drupal site reveals how data is being processed and stored on your servers, and steps that are required to comply with the GDPR.

Are there any Drupal modules that will help the website with EU compliance

In short, Drupal community has come up with General Data Protection Regulation module that gives users visibility to their stored data. As an owner of the site, it's your responsibility to deal with the organization inner workflow of dealing with customers data. Not to mention Drupal’s GDPR module can be a Kickstarter to go through checklist points to maintain the privacy and security of an individual. Further, configuring the site plays an important role.

With the integration of GDPR, users will be able to view what are the information stored about them, can correct all the stored data themselves, opt for “forget me” action from the site, can remove the account (but not the content). In addition, the updated version will have more items and recommendations on the checklist.

Okay, so now you know what GDPR is and how you can make your Drupal website GDPR compliant. Understanding how to adhere to these rules confounds many people, but it's an essential part when your customers are from EU. Our intention here is to inform. We will try our best to keep you updated as the regulation move towards implementation. 

Still worried how you go about making your site GDPR compliant? Drop a mail at info@valuebound.com and let our Drupal 8 experts help you with your queries.

Have you ever been in a situation where you were required to generate PDF of HTML code? Recently, I came across a similar situation. In Drupal 8, there are several PHP libraries that allow you to generate PDF. However, out of curiosity, I thought of finding better alternatives. After some research, I found an interesting library, called mPDF, that converts HTML code to PDF without changing the structure.

mPDF is a smart library that considers the CSS attached to the HTML. Not only CSS, it takes care of almost all the HTML tags like form tags, tables, images, lists etc.

Generating PDF of HTML in custom module

Requirements

mPDF 7.0 requires PHP ^5.6 || ~7.0.0 || ~7.1.0 || ~7.2.0. PHP mbstring and gd extensions

Installation

Step 1 Download mPDF via composer and its packageist package mpdf/mpdf.

Step 2 Run the following command in the Drupal root directory: 

$ composer requires mpdf/mpdf

Step 3 Once the mPDF libraries install generate the pdf in the custom module.

Step 4 In custom module, create a controller with routing path(/pdf-download)

Step 5 Now hit the URL (/pdf-download) to download pdf

Whenever you hit the URL, pdf will automatically get downloaded. Further, the HTML which we wish to print can be passed dynamically too. For example, by passing the node contents, we can download the node contents in a pdf file.

Hope you can now generate PDF from encoded HTML in the custom module. If you have any suggestions or queries please comment down let me try to answer.

Over the period of time, website performance degrades significantly affecting the business in terms of traffic, sales, marketing etc. And there can be n-number of reasons for the poor performance of the website. In this scenario, performance enhancement is one of the solutions to keep your website as well as the business running efficiently.

Well, there are various tools to debug the performance of web applications. In case your website is running on Drupal 8, then you need not worry as there are various contributed modules that help to identify the reasons and debug the site. Here we will explore how Web profiler helps in enhancing Drupal 8 site performance.

Below are the most used and trusted modules that helps to debug site performance. It will also help you to learn how your site handles page requests

So what is Web Profiler

Web Profiler is a Drupal 8 Contributed Module (now a sub-module of Devel). It is built on the top of Symfony Web Profiler component. Hence, this component is a must for web profiler module to work.

Integrating Web Profiler with Drupal 8

Since Web profiler is a sub-module of Devel, we need to download the Devel and install the web profiler.

After enabling Web Profiler module, it renders a fixed bar at the bottom of each page for users.

Web profiler also provides permission for each role - The View Web Profiler toolbar permission. With this permission, you can decide which user you want to show the toolbar.

It also provides the configuration page (Go to Configuration -> development -> Devel settings -> Web profiler) where you can do all sorts of configuration related to toolbar items, IDE settings.

Select the checkbox in configuration page to fix which items should be displayed at the bottom of each page.

By clicking on any of the items at toolbar, you will be taken to the full profiler output.

In full profiler, we can see vertical tabs. Check out the description of each tab below.

PHP config - This section gives information about PHP configuration on your server.

Request - It provides information about page request. Cookies, request and response headers as well as server parameters are also provided.

Timeline - This is nothing but a graph which gives information about the controller, events that are called for particular page request and how much time they have taken to compile.

Database - It gives a list of all the queries, which are executed for a particular page request.

User - This section provides information about logged in user i.e name, authentication, roles.

Views - It shows a list of views that were rendered on the current page with their respective build time, execute time, and render time.

Blocks - This shows a list of blocks that were rendered on the current page.

Forms - This section lists the forms built on the current page.

Extensions - This section lists all the modules and theme that are enabled on your site.

Cache - This section lists the different caches and the respective number of hits or misses.

Install Libraries to render timeline

Web Profiler requires two javascript libraries to render the timeline and to syntax highlight collected queries. In Drupal 8, these javascript libraries are optional and work without even installing them.

• Highlight.js

Highlight.js is used to highlight the syntax of queries.

Create /libraries/highlightjs/ directory inside your Drupal root directory.

You can download the library from http://highlightjs.org and copy js and styles folder from downloaded folder and place in /libraries/highlightjs.

• D3.js

D3.js is used when viewing the timeline page.

Download the D3.js from https://github.com/d3/d3/archive/v3.5.17.zip and place in /libraries/d3 folder.

Note: Web Profiler module requires D3 library 3.x (not 4.x) to render data.

Displaying Timeline

• Add the following codebase to your settings.php or settings.local.php in order to display the details of Web Profiler on the timeline page.

• The codes are also available in /devel/webprofiler/README.md.

         $class_loader->addPsr4('Drupal\\webprofiler\\', [ __DIR__ . '/../../modules/contrib/devel/webprofiler/src']);
         $settings['container_base_class'] = '\Drupal\webprofiler\DependencyInjection\TraceableContainer';

• Remember that the code above assumes, you’ll add the devel module at /modules/contrib/devel.

IDE Integration

In detailed profiler view, the class name is mentioned.

Each class name is linked to open the class in an IDE. Click on the link to open class in defined IDE. The setting is available in module configuration page.

Configure the following URLs to work for your IDE.

• Textmate

          Use txmt://open?url=file://@fileline=@line

• PhpStorm 8+

          Use phpstorm://open?file=@fileline=@line

Well, there are various ways you can debug Drupal 8 website performance, including web profiler. Alternatively, you can explore caching methods as well as other techniques.

Hope this blog will be helpful to you. Comment below if you still face any problem with performance enhancement. Will be happy to answer your question.

Below given is a presentation on debugging Drupal website using Web Profiler.

Sometimes we need to implement a search functionality that looks similar to some of the renowned e-commerce site search (like Amazon, Flipkart and so on) as per the category, types and all.  For this kind of search, Facet is a good option. So what exactly Faceted search is?

Facet is a module, in Drupal 8, that provides a facility to arrange all the search results as per the category. Basically, it is an arrangement of search results based on categories, content type on indexed terms and content type.

Why we use Facets?

There are various reasons a Facet can be used:

• It provides a drill-down search facility.
• It can be used with default search and Solr as well.
• It shows a number of item count for each category.
• Facet provides a wide range of configurable setting in UI and so on.

Why Solr?

‘Speed’ is crucial for any website as well as for search engines success.

So the question here is how can we keep our Drupal system search fast when it has ’millions of content (like pages, nodes)? The answer is Apache Solr.

Faceting with Solr:

Solr supports a range of Faceting:

1. Field faceting - Retrieve the counts for all terms or just the top terms in any given field. The field must be indexed.

2. Range faceting – It can be used on any date field or numeric field that supports range queries. There are some parameters for range Faceting. For more, check Solr Ref Guide 6.6

3. Interval faceting - It allows users to set variable intervals and count the number of documents that have values within those intervals in the specified field.

4. Query faceting - This faceting returns a number of documents in the current search results that also match the given facet query.

5. Pivot faceting - It allows to break down the values by category and sub-categories.

Require Modules for Faceted-Solr:

Module to uninstall:

• Search

Modules to install:

• Facets
• Search API
• Search API Solr Search

How to use Apache Solr with Facet:

Follow the below steps to use Facet with Solr:

1. Create a Solr server: First, create a Solr server in your system. In order to have a better understanding, check out how to configure Apache Solr with Drupal for better content search.

2. Install Required Modules:

In Drupal 8, Composer is now a standard to include external PHP libraries.

The Search API Solr module requires Solarium codes, which is not included in the module repository. So if you download this module directly from drupal.org and put the module in your Module folder then it will show the Solarium Libraries missing error at the time of module enabled. So I recommend installing all the dependencies of a module via Composer.

Run the following commands to overcome this libraries dependency issue:

1. $ composer config repositories.drupal composer packagist.drupal-composer.org
2. $ composer require "drupal/search_api_solr 8.1.x-dev" (latest stable release)

After completing the above process, make sure you have all the required modules (Search API, Search API Solr Search and Facets ) in your module directory. Install all the required module from UI or using the drush command.

Note: You need to uninstall core “Search” module if you are not going to use that else it will conflict with solr and Facet search.

3. Configure Solr Server on the site:

Go to Search API configuration page (Configuration >> Search and metadata >> Search API). Here I am using the default Solr server, but you can create your own server by clicking on “Add Server” button.

So I did some changes in configuration for default “Solr Server” by clicking on Edit link. Configuration changes similar to this:

After making the changes, visit the server status page on click on “Solr Server” link or from ‘/admin/config/search/search-api/server/default_solr_server’ path. If everything goes fine then you will find a pop-up box with the message “The Solr server could be reached” and “The Solr core could be accessed”. That means your Solr server connection is done successfully. Now you can use it.

4. Configure Search Index:

After configuring, Solr Server, you need to configure the Solr Index also. The Solr Search creates a default content index containing all published nodes. You can modify the configuration as per your requirement. To do this, click on the Edit link of “Default Solr content index”.

5. Indexed Content

To check whether the index is working properly or not, click on the Search Index title (like Default Solr content index). You will find the indexed status and you can re-index all data from here also. Before re-indexing, you need to click on “Clear all indexed data” and then click on “Index now” button.

6. Solr Search view page:

The Solr search module creates a default view page for search results, which can be accessed at ‘/solr-search/content’.

7. Facet configuration:

You can configure Facet by visiting ‘/admin/config/search/facets’ path or from “Configuration >> Search and Metadata >> Facets”.

Create new Facet by clicking ‘Add Facets’ button. Here I am creating a Facet name Content type facet by following the below steps:

• Click 'Add facet'.
• In ‘Facet source’ drop-down box, choose the 'View Solr search content, display Page'.
• Select “Content type (type)” in Field drop-down.
• Name the facet 'Content-type'.
• Click on ‘Save’ button

After creating Facet, you can do some basic configuration like:

• Select ‘Show the amount of results’ checkbox to display the count of results.
• Select  ‘List item Label’ checkbox to display the labels of Content type instead of Machine name.
• Do some other configuration as per your requirement.
• Click on ‘Save’ button

The facet provides a block that can be placed in the theme region from Block layout. Here I have placed that block in Sidebar First region on my website. To place the block, click on the ‘Place block’ button from that particular region and search the block there.

Here I have created Facet with the name the ‘Content-type’ so that you can find a block with the similar name as Facet. After placing the block in that particular region, visit the search page at ‘/solr-search/content’. Here the facet block looks similar to the below screenshot:

Have you used Faceted search earlier? Is there anything you'd like to clarify or see further clarified about Faceted search? Let me know in the comments!

References:

Faceted Apache Solr Search with Drupal 8

Faceting - Apache Solr Reference Guide

Tutorialspoint - Apache Solr - Faceting

Lucidworks - Faceted Search with Solr

This is the third post in my series on the AngularJS

Before having a look at AngularJS’ components, terms and terminologies, let’s make sure everyone is on the same page. If not then you can go through our previous blogs “Introduction to AngularJs” and “Data-binding methods in AngularJS” to have a clear understanding of binding technique and when/where these can be used for a better result.

When we talk about AngularJS, we come across many new terms and terminologies such as Angular module controller, and others. So why these modules and controllers are called building blocks of an Angular application. And what are the use cases?

First thing first, let’s start with the main objective of this post. Do not worry when you will complete this blog, you will have an intermediate level of expertise on AngularJS modules & controllers. 

In the  previous AngularJS Tutorial, titled Data-binding in AngularJS, you might have noticed  the source code similar to the one mentioned  below:

angular.module(name, [requires], [configFn]);

Parameter
name: Name of the module.
requires:  is an optional parameter, if mentioned the new module gets created. If not, an existing module is being retrieved.
configFn:  is an optional parameter, execute a function on module load

The universal way to create or register the module with Angular is Parameter. It has a suite of services, controllers, services, configuration & directives. In other words, you can consider it as a main() function to initialize and get chained with variables and methods for an application. 

Sample code:

Var MyNewapp = angular.module(“MyNewApp”, []);

Code simplification:  We are using an Angular object to create the module. Here you will also find two parameters of angular.module, the first parameter is the name of a module and second refers to a blank array. 

Remember, there could be a scenario when your custom module will be dependent on another module. In that situation, you can pass that module over the Angular module function as a parameter and utilize its resources.

Use: To bootstrap an Angular application, declare ng-app name on your page. 

In the above source code, the

  
    
var ControllerName  =  function ($scope) {
   /* variable initialization goes here */
}
    
   

 
   
Myapp.controller(“'myCtrl'”, function($scope) {   
   $scope.firstname = "Jaywant Topno";
});
  

The blog is follow up on our previous post “My First Impression of Learning AngularJS” where I shared my experience of working in AngularJS. This blog is intended to take you one step ahead and have a better understanding of basic operation workflow. In Angular, we have a concept of ‘Data-binding’ that means synchronization of data between a view to model or model to view (technically). 
 

From the business perspective: Change in the logic (backend) impacts front-end (view) and vice versa.

Scenario: Suppose you have a variable, called BookPrice, stored in a database or in local storage. And you are trying to render that value to your page. So change in a “BookPrice” in DB will change front-end value by performing any operation and submitting data back to DB. It will also help you to sync data from view to model.

Angular follow three types of Data-binding method:

1.  One-way Data-binding
2.  Two-way Data-binding
3.  One-Time Data-binding

One Way Data-binding: AngualrJS binds data using one way/two way Data-binding method. In this approach, the value of the variable is always taken from model and display using a view. This is a unidirectional approach. Any update from view won’t update the model. Few points to notice here:

• Data always flows from model to view.
• In case of any modification in the model, the same will sync up in view.
• Data won’t flow from view to model.
• To render data to the page. Use data-ng-bind aka ng-bind or evaluation expression  {{ }} (curly braces).

As you can see in below codebase, we have included AngularJS minified version in a script tag and we have ng-app & ng-init. 

ng-app or data-ng-app: Before compiler starts executing Angular, it looks for ng-app for initialization and loads the document. Then tells Angular that this is a root element for the application. Generally, it is attached to

/

tag. 
You’re not allowed to use multiple ng-app for single HTML page. Angular does not execute outside of its scope (code inside ng-app will be executable).

ng-init: ‘ng-init’ stands for initialization. As per Angular official statements, ng-init can be used to add an unnecessary amount of logic to your template. The main objective of using ng-init is to evaluate expression under the current scope.

In the above source code, I tried to execute outside

tag. As a result, it responded incorrectly and print the data as it is. Similarly, there are various ways you can incorporate ng-app into the HTML. Here we are executing the codes online. Later, we will take a look at different ways to incorporate ng-app.

 

Two-way Data-binding: It is a bi-directional approach as it travels in both of the directions. From model to view or view to model. Any Update/change on (model) endpoint response (JSON/XML) will impact in the front page that means data in a page(view) will be also impacted.

Few points to note here:

1. Data always flow from model to view and view to model
2. In case of any modification in the model, the same will sync up in view
3. In case of any modification in view, the same will sync up in the model
4. ng-model directives are used to bind input box/textarea/select list to the variable created using AngularJS
    

Code Simplification: As you can see in the following source code, we have created a new application under script tag and added it inline. Before I start any more code simplification, let me take out a portion of code that you will get in each and every codebase.

Best way to differentiate HTML tag and JS code is by creating a separate file and paste the same code in JS file.

var app = angular.module('newApp', []);

Note that using above code, we can create an object for an app and give them name as ‘newapp’ where angular.module is a syntax to create a new app. Also, you will find a blank array, it’s nothing but to inject services into your app or any dependency for your app.

Sample codebase:

Here controller holds the function or attribute or functionality in order to provide data to module and module provides data to an application.

Sample codebase:

app.controller('newController', function($scope) {
                 /*properties will be defined here.
                    Variable defines inside controller will be always tagged with $scope
                */
  $scope.properties=’100’;
 });

One-Time Data-binding: In AngularJS, data gets transferred from model to view only one time. Ones the change happen in mode, it won’t impact on view again and again. As per Angular official document, the values only need to be shown in the view and are never going to update from view or controller.

• Data always flow from model to view or scope to view
• Data populated only once
• Data doesn’t travel from view to model
• Rendering the one-time data view can be accomplished using: :[double colon] special character
• Use one-time binding when we need a static variable. Help to reduce unwanted watchers.

Below source code will assign name variable only once. It won’t change later. On-time binding follows data flow pattern from model to view that also only once. As you can see on the result screen. Name value has been taken only once from the model and didn’t change later on.

Result:

Above shared source code refers to Databinding in AngualrJS with examples. 

That’s it! Data-binding is a technique that helps you bind data with the model in front-end and vice versa. Though we have different ways to bind the data, we have gone through one-way, Two-way, One-time Data-binding model. Use the models technically as per the requirement to make sure the flow, internal performance & complexity.

Related: Overview of AngularJs Module and Controllers

GitHub source code: https://github.com/xaiwant/AngularJS-Data-Binding

Caching is a popular technique to optimize the performance of a website. It is a process that stores web data (HTML, CSS, Image) in some accessible space. Moreover, a cache is a detailed information of a validity of a resource. This information defines for how long the resource is valid and should not be considered stale. The information can be stored at every level right from the original server to intermediate proxies to the browser.

Here you will get to learn about what key/value pairs in the header mean and Cacheability metadata in Drupal 8.

Every request or response contains a HTTP header, which provides additional information about the request/response. This also contains information related to cache.

Typical HTTP Header Example :

Let’s see what these key/value pairs in the header mean:

• Expires: The Expires header sets a time in the future when the content will expire. This header is probably best used only as a fallback.
   
• Etag: It is a unique hash identifier of the cacheable object that the browser caches. Whenever a cached response is requested repeatedly, browser checks with the server if the eTag of the response is modified. If the response is not modified, the server returns 304 not modified else 200 along with new response & new eTag.
   
• Last-modified: This parameter specifies the date and time the resource was last modified. Last-modified is used as a fallback when Etag is not specified.

          Syntax : , :: GMT

• Vary: Vary specifies the list of a parameter on which the response should vary. For example, Accept-Encoding specifies the format in which the browser expects the response such as gzip, sdch or simply text/html.

Similarly, User-Agent specifies the user-agent such as a mobile user or desktop user based on which the content should vary.

Another interesting Vary parameter is ‘cookie’ which specifies to vary content based on the user. For instance, the different version of same content for the anonymous user and logged-in user.

• Cache-Control: Cache-Control specifies directives which instruct the browser / intermediate-proxies to who can cache the response, the conditions for caching the response and the maximum time for which the response can be cached. Some of Cache-Control directives are:
   
  • No-cache: Indicates that the response should be validated with the origin server before sending.
     
  • Public/private: "Public" marked responses indicates that the response can be cached by any cache, even if it has HTTP authentication associated with it. Private marked responses are intended for a single user and intermediate cache should not store the response, but private cache such as browser may store the response.
     
  • No-store: Shows that the response should not be cached by the browser or intermediate proxies.
     
  • Max-age: Indicates the maximum time in seconds for which the content can be cached before it must-revalidate. This replaces the Expires header for modern browsing. This option takes its value in seconds with a maximum valid freshness time of one year (31536000 seconds).
     
  • s-maxage: Similar to the max-age setting. The difference is that this option is used only for intermediary caches.

Now we have a basic understanding of caching, so let’s see how this works in Drupal 8.

Cacheability metadata in Drupal 8 :

All things that are either directly renderable or used to determine what to render, providing cacheability metadata.

Cacheability metadata consists of three properties:

• Cache tags: If our renderable arrays depend on some data such as entity data or some configuration values we use cache tags to invalidate the data.
  
  Syntax : “Thing:identifier” 
  
  Example:

  node:5 // cache tag for node entity 5
  user:4 // cache tag for user entity 4
  node_list // list cache tag for node
  
  $tags = array('node:1', 'user:7');
  \Drupal::cache()->set($cid, $data, CacheBackendInterface::CACHE_PERMANENT, $tags);
  
  // Invalidate all cache items with certain tags.
  \Drupal\Core\Cache\Cache::invalidateTags($tags);

• Cache contexts: Cache context is used when our renderable arrays depend on some context such as user role, theme or URL. This is similar to Drupal 7 block constants like DRUPAL_NO_CACHE / DRUPAL_CACHE_PER_ROLE / DRUPAL_CACHE_PER_PAGE, but with many more options.
  
  Example :

  // Setting Cache Context & Tag for a block.
  return array(
    '#markup' => $this->t('My custom block content'),
    '#cache' => array(
      'contexts' => ['url.path'], //setting cache contexts
      'tags' => ['node:1', 'node:2'] // setting cache tags
    ),
  );	 

• Cache max-age: Cache controls how long an item may be cached by a number of seconds.
  
  0 means cacheable for zero seconds, i.e. not cacheable.
  
  \Drupal\Core\Cache\Cache::PERMANENT means cacheable forever, i.e. this will only ever be invalidated due to cache tags. (In other words: ∞, or infinite seconds.)

Here we have explored the basic of Caching in Drupal 8, what key/values pairs in the header mean and cacheability metadata. Caching allows retrieval without having to request the data from the original source. In case you have any questions, feel free to share in the comments below—we'll get back to you ASAP.

Below given is a presentation on Caching in Drupal 8.

Before we delve into the ocean of understanding and learning curves of AngularJS, let me share my insights and experience of working on web development. Later, I will tell you why experiences are worth sharing.

For the past four-and-a-half years, I have been working in an IT industry. Started my career as a Drupal developer, working on web building, site building, extending features, development as well as designing. During this journey, I came across many technologies which I was expected to learn from scratch to bind/ integrate one to another. 

Cutting a long story to short! So why did I started learning AngularJS? What is the scope of AngularJS? And why I am sharing my experiences with you guys?

Nowadays, applications are mostly developed in haste, intended to build once and run across multiple environments with or without little changes. These days we focus more on re-usability instead of rewriting the code base afresh.  

Recently, I had an opportunity to build a website using REST Services, which provides result in JSON or XML format. It also displays the same data using front-end framework/Decoupled website. In Drupal, it’s called as Headless Drupal, where front-end & backend will have different technology (because the client was not happy with the existing design pattern of Drupal & wants to execute those pages as a mobile app for different Operating System). 

After brainstorming, our team decided to go ahead with AngularJS to get the things done. Initially, I didn’t know whether it was a time-saving framework or not as it follows MVC architect. Considering the various advantages of AngularJS, the framework is good for building a hybrid app using HTML, CSS, and JavaScript. 

The main advantage of building over the native app as it is sleek, maintainable & simple. When we started learning this framework, at that time every syntax/term was new for me. Sometimes it was like a nightmare to understand the usage. Initially, I was a bit worried whether developing the app on AngularJS is worth or not, but stick to the decision and moved ahead with same ideas. This is the reason why I wanted to share my experience with you noobs.

Let’s have a brief look at the history of AngularJS as it helps in learning, who developed AngularJS and why it was extended. Check out some of the reasons why you should give AngularJS a shot. To mention a few:

• AngularJS is an open source framework powered by Google. The framework is supported by a community of highly skilled professionals and is a solution for various web applications.
   
• It follows MVC architect that help developers to write clean code and separate front-end with logic. Model refers to data, the view refers to front-end and controller is the logic that binds the model with a view. MVC splits app into a different component and later on, Angular manages that component and merge them for your request. 
   
• Good to build SPA. SPA does not refresh the page again repeatedly for each request, instead of loads the chunks of the page to act faster because it loads entire page only once. More into Front-end and reduce page refresh act as a local application.
   
• AngularJS is not a DOM-like jQuery, but uses a subset of jquery (Jqlite).
   
• Basic Knowledge of HTML, CSS, and JavaScript required. Jquery will be a plus point.
   
• Gives power to your front-end with time saver.
   
• Mobile app development using AngularJS. Hybrid apps like Ionic, PhoneGap used to build a hybrid app. so that user can use those page as App.

Moving forward, we will discuss various AngularJS components, namely

• Data Binding
• Modules and Controllers
• Scope
• Filters
• Services
• Dependency Injection
• Functions
• Directive
• Routing

Let’s start from the beginning. Download AngularJS library from https://angularjs.org/. Now install and enable AngularJS for the web page

Now place it on your associated web page and attach. As we attach JS script in the HTML page.
 

AngularJS is attached to your page. Now perform an operation using frontend Framework. Start with a small piece of code. Do not worry, if few terms will be absolutely new.
 
Below, I have included script tag to include AngularJS minified version 1.2 with 2 function New1() & New2() and terms like ng-app, ng-controller. As an output, this will return the text.
 

So far we have discussed the basic codebase of AngularJS. How to set up AngularJS with sample code execution. Over the next couple of posts, I will elaborate each of the components of AngularJS with sample codebase. Till then just relax and focus on the basic. 

When you complete the tutorial, I believe you will have a better understanding of complex terminologies and techniques. Later, I will also use new terms name like the model, view, controller, data etc. Guys! Have patience and don’t get confused.
 

Web performance is an important factor to consider when developing a website because user experience and usability are dependent on the speed of page loads. Not to mention, web giants like Google, Yahoo, Amazon, and eBay are obsessed with it. And there are numerous ways you can boost site performance. 
          
In Drupal 8, there are specific tools and modules to optimize the site performance. 

To begin with, Caching is a popular technique to optimize the website. It is a process that stores web data (HTML, CSS, Image) in some accessible space. For instance, when a user request for a web page for the first time it stores readable content or information in the cache memory and whenever viewer request the same HTTP page again it retrieves the stored data and display to users. This is how it makes loading web page fast. 

There are mainly two types of caching: Client-side caching and Server side caching. Except for this two caching methods, pages can be cached in the database, Drupal primarily cache information within its database.

Core caching techniques of Drupal 8

Make sure “Internal Dynamic Page Cache” and “Internal Page Cache” are installed and enabled by default. See the below screenshot for an example.

Internal Page Cache:

This core module is for anonymous users. If you have an e-commerce website and you have “Add to cart” functionality for an anonymous user then this kind of caching can be done using the module. In case you don’t need this functionality then turn it off.

Internal dynamic page cache: This module is similar to Internal Page Cache and the only difference between the two is that it cache for both anonymous user and logged in user. 

Page cache maximum age:

This setting is for the maximum time age for a cached page. Whatever age we set here is the maximum age that our site tells browsers that they should keep cached information/data. By default internal dynamic page cache set “No caching”, however, it can be changed as per the requirement.

Bandwidth optimization:

When you choose to aggregate CSS and JavaScript files, “Bandwidth Optimization” groups both in bundles in order to reduce the number of HTTP requests, which is necessary for the page to load. Instead of loading a couple dozens of files, the page will load with just a handful of aggregates.

Drupal external caching technique:

There are few techniques in Drupal that controls the CMS interaction with an external cache. This can be done using contributed modules, such as 

• CSS/JS Aggregation: There is a module for CSS/JS aggregation, dubbed  Advanced CSS/JS Aggregation. Drupal has its own aggregation capabilities, but AdvAgg module greatly enhances these by offering more effective approaches to file grouping, caching, and compression. 
• Varnish cache: Varnish is a program that speeds up a website while reducing the load on the web server. You can accelerate the site performance using various other modules, such as Varnish purge and  Advanced Varnish Cache. 
• Memcache: Memcache improves Drupal application performance by moving standard caches out of the database. In Drupal 8, there are two types of Memcached modules: Memcache and Memcache Storage Have a look at how to configure Memcached modules with Drupal 8.
• Redis: Redis is a cache technique that is optimized for high-performance storage and retrieval. It works with an in-memory dataset. Have a look at Redis module for a detailed explanation.  

Use MariaDB instead of mysql

MariaDB turns data into structured information in various web applications. There are various advantages of MariaDB in terms of performance and features, like better storage engines. In addition, it supports TokuDB that handles big data for large organizations and corporate users.

Note that MySQL's database engines, MyISAM and InnoDB, are replaced in MariaDB by Aria and XtraDB respectively. Aria offers better caching, which makes a difference when it comes to disk-intensive operations. Temporary tables also use Aria to speed up complex queries. Percona's XtraDB gets rid of all of the InnoDB problems with slow performance and stability, especially in high load environments.

Use Nginx instead of Apache

Apache and Nginx are the two most common open source web servers, but Nginx is way faster and consumes less memory than Apache. Nginx has proven record and performing well. It also manages a large number of concurrent users with minimal resources.    

Other specific tools and modules

• Disable all unnecessary module from your web application.
• Update contributed and core modules. If an update is available.
• Devel: Use Devel module for query analysis as it helps to trace issues.
• CDN (content delivery network): If your site has large amounts of content to display, consider using a CDN. Most CDNs are used to host static resources such as images, videos, audio clips, CSS files, and JavaScript. The closer a CDN server is to a site visitor, the faster the content will be delivered to their computer or mobile device. E.g.: AWS CloudFront, Akamai. It provides easy Content Delivery Network integration for Drupal sites.         
• Image Lazyloader and Blazy: These two modules loads only those images that are visible to the browser window.
• CSS sprite: Use CSS sprite for small images combine into one or serve it from glyphicon.

    Ex. 

• Use gzip compression: GZIP provides a lossless compression, that is, we can recover the original data when decompressing it. It is based on the DEFLATE algorithm. E.g. gzip compression:
   

mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

You can also check if your compression is working using the Gzip compression tool.

Replace Your Web Hosting

Now you know how to enhance Drupal site performance. In case, your application is still not meeting expected performance goals then consider choosing a host that provides faster service.

Managed Dedicated Server(s): Managed dedicated server takes care of all your hosting needs for you. Not only you get the hardware but you get a team of experts to make sure everything is running as it should. They keep your software up-to-date and alert you if there are any problems. You can deploy multiple servers in many configurations.

Dedicated Server(s): A dedicated server provides low latency that means a fast response time for most small to medium-sized sites.

Cloud Hosting: Cloud hosting is scalable. The “cloud” means that there is a data center with lots of dormant servers. As your site’s need scale up (or down), the servers in the data center respond with more server power. Examples: Acquia Cloud, Pantheon, and Platform.sh.

Let’s check the result

You can use one of a desktop or online tools to test and improve your site performance. Here are few that you may consider trying:

Desktop tools: ApacheBench (ab), Apache jmeter, The Grinder, EasyQA

Online sites: Pingdom, GTMetrix, PageSpeed Insights etc.

Performance optimization plays a pivotal role in every web application whether it a large scale or a small scale. In this blog, I have tried to assemble a list of all the configuration changes you can do to tune the performance of Drupal applications. Note that the size of images can have a great impact on your website’s loading speed and performance.

Below given is a presentation on "Performance optimization in Drupal 8." 

References

http://www.tothenew.com/blog/best-practices-to-optimize-performance-in-drupal-8/ 
https://www.volacci.com/blog/how-improve-drupal-8-website-performance 
https://www.nginx.com/blog/8-tips-for-drupal-8-performance/
https://www.ostraining.com/class/performance/
 

As a Drupal professional you might have heard of Flood Table (user session management) but didn’t give much thought to it. 

Having little theoretical knowledge of the core behavior of Drupal is not bad. So allow me to explain what user session management is all about? And how it can protect you from bot or malware. I will also share few #Tweaks that help you to understand how to Flood & Unblock user from your site.

Drupal 6 does not provide security from login attempt attack from Core until you enable login security contributed module. In Drupal 7, however, the core has an in-built functionality to handle user account attack whether it is a bot or some sort of malware. In this scenario, Drupal protects your account from multiple hits either from one user id or one source ip. 

Drupal protects your site in two different ways:

1. Failed login user id
2. Failed login source IP

Drupal blocks particular user from login if he/she attempt to log in for more than five times within a time span of six hours, and source IP if there is 50 failed attempt within an hour. These data get stored in Flood Table provided by Drupal core. 

As shown below, we have event id (fid), event (user logged in attempt IP/logged in attempt by user id), identifier (value for logged in user ID/IP), timestamp (event occurrence unix timestamp), expiration (Expiration timestamp. Expired events are purged on cron run.)

The Table helps you to view locked user IP & ID on the Drupal website. In Drupal 8, you won’t find ‘FLOOD’ table by default until any of the user lock/user IP event occurs. Thereafter, Drupal create FLOOD table.

Below is the Drupal 8 Table structure of Flood.

Let’s say you, as an admin, have been blocked due to multiple wrong password entry. And unfortunately, you don’t have a mail server installed on the web so that you can request for Password Reset. 

In this case, you can Reset your password by running Drush command. If, somehow, you remember your password, but unable to log in due to multiple false attempts then clear your flood table first. 

When your account is locked, visit phpmyadmin using UI or log in to mysql or relevant database as a root user then search for Flood Table and clear the respective user ID/IP.
 

Open related database. Look for Flood table and delete specific user row from Table entry. As you can see above table having two entries.

1. User.failed_login_ip: Display user attempt was made from the IP address (127.0.0.1).
2. User.failed_login_user: Display user ID & hit by source IP address (2-127.0.0.1).

The flood table has been cleared from the terminal and you have deleted specific user or IP. Now you can log in to your Drupal website. So simple. 

Let’s view the same scenario another way around. 

You don’t have ssh/putty access, but you have admin rights and you want to unlock one of the user account, who is blocked due to multiple false attempts. In this scenario, you can download & install Flood Unblock & Flood Control module. 

Drupal Flood Unblock provides an interface to the admin so that she/he can unblock user ID/IP either in bulk or individually. Use the following Drush command to clear user ID/IP:

drush flood_unblock all
drush flood_unblock ip
drush flood_unblock user

Drupal Flood Control holds additional configurations to manage Failed IP limit and Failed user limit with the time range. Set this configuration as per your feasibility and save the configuration.

Locking mechanism is being handled by Drupal user_login_authentication_validate()

// Set per-IP Drupal failed login attempts limit and window.
variable_set('user_failed_login_ip_limit', 50); 
variable_set('user_failed_login_ip_window', 3600); 

// Set per-user Drupal failed login attempts limit and window.
variable_set('user_failed_login_user_limit', 5) ;
variable_set('user_failed_login_user_window', 21600);

Run the following commands:

To Reset user password using drush:

drush user-password USERNAME --password="SOMEPASSWORD"
or 
drush upwd USERNAME --password="SOMEPASSWORD"

To Reset user password using Drupal Console:

drupal user:password:reset

To Reset user password using SQL-Query:

Generate hash code for your new password. By running one of the commands in the Drupal root directory:

./scripts/password-hash.sh newpwd 

For Windows user:

 php .\scripts\password-hash.sh newpwd

Once received encrypted password, execute sql query to run password update. And DONE.

UPDATE users SET pass 

='$S$CTo9G7Lx28rzCfpn4WB2hUlknDKv6QTqHaf82WLbhPT2K5TzKzML' WHERE uid = 1;

So far we have checked out functionality, mechanism, and recovery of Flood and Table structure. Here are few tips that will help you to protect user account especially admin account that every hacker tries to attack.

1. Do not give admin username as an admin.
2. Don’t allow the user to view username of admin.
3. Hide confidential data like username from an anonymous user.
4. Enable notification via mail/sms if super user logged in.
5. Block uid =1 if no more required. & enable it in temporary, if they required it.

That’s it! This is all about Flood Table. 

Okay, so you know what is the purpose of Flood Table and you're convinced that you've got something new to learn. The goal of our blog post is to bring you valuable information to help out in difficult situations and grow your business. Hope you enjoyed this post! Please comment below and let me answer in case you have any doubts.