Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Oct 16 2020
Oct 16

The concept of atomic design was introduced by Brad Frost and it helped accelerate the process of creating modular designs. The universe is made up of a set of elements, that are the building blocks of everything around us, and these are known to us as the periodic table of elements. All these elements have fixed properties that define each of them. The same way in which these elements combine together to form the universe, the design system is created by the combination of different elements of atomic design.

Let’s dive into these elements and understand the process!

The elements of Atomic design written on a blue background

Atoms

We have all read about the atoms in chemistry. They are the building blocks of matter. Every chemical element has different properties and they cannot be broken down without losing their meaning. Now, if we relate the same thing to our design system, the atoms are the foundation building blocks of the user interface. These atoms have basic HTML elements, for example, buttons, labels, spacings, etc that cannot be further broken down without suspending its functions.

Different elements of a search option

Molecules

In chemistry, molecules are a group of atoms attached together that can have different properties. Two molecules made of the same atoms behave differently and show distinct properties. In the same way, Molecules in the user interface are a group of elements working together. For example, if we put the label, button, and search input together, we will get the search form molecule. After they are combined together, they have a purpose and define the atoms that are put together. To construct a user interface, we assemble elements to form molecules like the search molecule.

Search bar

Organisms

Organisms are comparatively complex UI components. They form a distinct section of an interface. The organisms in the design system are a group of molecules. The search molecule that is created by a group of atoms can be combined with another molecule that creates complete page navigation to make an organism. 

The organisms can have similar or different molecule types. They can be a search form or a logo image, etc.

Search bar with logo framework

Templates 

The chemistry analogy ends here. You just read about the basic structure of a design system i.e. the atoms, molecules, and organisms. Now let's see how they can be used to create a consistent product.

At this point we see the design coming together to form pages. Templates articulate the design's content structure and place components into a layout. While crafting a design system, it is important to see how the components look and function when put together. You basically create a skeleton of a page. An important characteristic of templates is that they focus on the page’s content structure in spite of the final product.

Wireframe of a webpage

Pages

Pages show how the UI looks like when placed with everything in place.
This stage is the most important and concrete stage of all. We are able to understand and have a look at how the page looks when real content is applied and if everything is looking and functioning as planned.

Home page of a website

Why go for atomic design?

Atomic design involves breaking off a website into the elements that we just talked about and then forming a website. Now that we have understood them, let’s understand why atomic design should be used and how it makes our life easier.

Mixing and matching components

When components are broken down, it becomes easy for you to understand what part of the website can be reused and mixed to form molecules and organisms.

Creating a style guide

If you have created your site according to the atomic design guidelines, then the atoms and molecules created before the site is built can be a help as a basic style guide.

Consistent code

The chance of writing duplicate code is reduced with atomic design. It also becomes easy to understand which components are used for different parts of the website.

Understandable layout

The documentation of atoms, molecules, and organisms and where they are being used makes it easy to understand what each part of the code is representing. The best part is that it is much easier to explain the codebase to a new developer.

Quick prototyping

Making a list of elements before the website creation starts helps you mockup pages instantly by combining the elements of the page.

Fewer components

If the website creator has a list of all the atoms and molecules, he will more likely use the existing elements rather than creating new ones.

Easy update and removal

With one atom, molecule, or organism changing at a time, it is easier for any update to be done across all other instances of the site. In the same way, the removal of unwanted components becomes easy.

Implementation of atomic design

Getting started with atomic design needs you to understand every part of it and dividing into the basic elements that are, atoms, molecules, and organisms. You can always start by conducting an audit. This will help you look into discrepancies and areas that are lacking. This will make sure that you and your team are familiar with the structure of the website. 

After you have conducted the audit, look for a platform where you can build your design system. Take help from the developers to know more about which tools will be more efficient. Make sure that the tool that you have chosen is easily accessible by everyone in the team. Tools that will help: 

Now that you have a good understanding of the design system and its principles, you can start building your website. Start by the construction of components piece by piece and don’t forget to document what page every component is for. Read about web components and component-based development to know more.

Conclusion

The atomic design provides a clear methodology for creating a design system. It makes sure that we are explicit with our creations and also that our designs are more manageable, consistent, and that the user interface is faster than ever before. For a faster and more efficient user interface for your website, contact us at [email protected]  

Oct 01 2020
Oct 01

The long-awaited Drupal 9 was launched on June 3, 2020. It comes with solutions that empower businesses to take advantage of the power of Drupal. With the thousands of modules that Drupal provides, I will take you through the ones that will help you with the development of the Drupal 9 site.

Here’s a list of the must-have Drupal 9 modules! 

Token

The Token module provides tokens that are not supported by core and also provides a UI for browsing tokens. 

Admin Toolbar

The Admin Toolbar module allows you to improve the administration menu at the top of your website and transforms it into a dropdown menu, to make it easier to access all the administration pages. 

Metatag

Metatag module allows you to provide structured metadata about a website. It provides support for metatags that gives you control over how your content appears when you share it on social networks.

It supports a large number of commonly used meta tags, including the page title, description, canonical URL, etc. 

Simple XML Sitemap

The Simple XML Sitemap module is needed by every webpage for SEO reasons. It creates a multilingual sitemap for entities, custom links, and views.

This module allows you to create multiple custom sitemaps through sitemap generator plugins along with customizing the URL generation through URLGenerator plugins. Also, the module gives access to automatic submission to search engines and XSL stylesheets for human visitors. 

Pathauto

The Pathauto module allows you to create patterns for your content while creating it. It automatically creates a URL for different kinds of content without the user creating one manually. 

Redirect Module

The Redirect module provides interesting functions like allowing you to create redirects manually and maintaining a colonial URL for all kinds of content, that redirects all other requests to that path. 

This module provides a common API for loading, deleting, and saving redirects. It also provides case-sensitive redirect matching with a hook to allow the other modules to decrease the candidate redirects. 

Paragraphs

The Paragraphs module allows the site builders to make things cleaner so that you are able to give extra editing power to the end-users. 

This module has a 'paragraphs' field type that helps to add a new paragraph field on your content and choose which paragraph type should be available to the end-users. You can also add a custom options field and do confidential coding in your CSS. 

With the Paragraph module, end users can now choose on-the-fly between predefined paragraph types that are independent of each other. 

Twig Tweak

Twig Tweak module provides a twig extension that helps in improving development experience. 

Diff

The Diff module adds a tab that shows all revisions like standard Drupal, to permissioned users. The tab also shows all added, deleted, and changed words between revisions. 

Shield

The Shield module handles Drupal as a 'walled garden' if a user does not know a user name or password. It also creates a shield for the website with Apache authentication. 

If you need to keep unwanted traffic away, shield is the module! 

Seckit

The Seckit module allows the modification of certain HTTP headers on your website to enhance the security of your site. You can always increase security in other ways. But the Security module makes it easier and more convenient. It comes with many security hardening options and reduces the risks of exploitation of web application vulnerabilities. 

Environment Indicator

With the Environment Indicator module, it becomes easy to work with stage, dev, local, and prod.

If this module is coupled with configuration split and admin toolbar modules, it can display which environment you are working with. It adds a color bar that informs you about the environment you are currently working with. 

Configuration Split

The configuration Split module allows outlining of the sets that will be exported to different directories and get merged together when exporting.

403 to 404

403 to 404 module is designed to show a 404 error when someone tries to access a page that they do not have permission to view. 

Inline Entity Form

The Inline Entity module provides a widget for inline management like modification, removal and creation. It extends the functionality of entity reference fields in Drupal which makes sure that the entities are edited, created and deleted on the go.

Advanced CSS/JS Aggregation

Advanced CSS/ JS Aggregation module improves the frontend performance of your website. It provides stampede file protection and uses locking so that multiple requests for the same thing results in just one thing doing the work. Check out performance optimization techniques of a Drupal website to know more.

Webform

The Webform module is responsible for making surveys and forms in Drupal. Emails can be sent to administrators after submission is done. This module has an extensive API to be able to expand its features and it also provides a basic statistical review. 

Coffee

If you are wondering about navigating through the admin quickly, Coffee is your module! All you need to do is type alt + D to visit start this module and type for the page you'd like to visit. 

Queue UI

The Queue UI module allows viewing queues and the number of items, deleting and processing queues during cron, and also removing leases.

Backup and Migrate

The Backup and Migrate module allows you to decide which table and data to backup. With the help of this module, you can dump all of your databases to a file download or save it offsite and also restore it from the previously saved database. Read about how to migrate to Drupal 9 to know more.

Devel

The Devel module allows the execution of PHP code inside the website and also creates dummy content. 

Captcha

The challenge-response that we often see while signing up or logging in is the work of the Captcha module. The main purpose of this module is to block sign-ups from spam bots that post spam content anywhere they can.

Chaos Tool Suite (Ctools)

Chaos Tool Suite is primarily a set of APIs and tools that help in improving the experience of the developers. This suite contains a module known as the page manager that manages panel pages, and as it grows, it manages more than just panels.

RESTful web services

The RESTful Web Services module provides a customizable RESTful API of data managed by Drupal. It allows you to interact with different content entities like users, comments, nodes, etc along with watchdog database log entries. Read everything about Decoupled Drupal and its approaches to know more.

JSON:API 

The JSON:API module helps in formatting JSON responses. It allows users to customize how their content is arranged on a page and even create landing pages with an easy to use drag and drop interface.

Layout Builder

The Layout Builder module allows content builders to quickly create layouts to display content. You can easily customize your content’s arrangement on a page or across different kinds of content and even create landing pages that have an easy to use drag and drop interface. 

Media module

Media module is a replacement of the Drupal core upload field that has a unified user interface wherein administrators and editors can manage their files and multimedia assets. 

Media library module 

The media library module comes with additional features to find and use existing media items and enhance the media list. This is specifically designed for sites with a lot of content where all the media assets can be reused. 

Claro

Claro is a clean and accessible administrative theme. It is a part of the Admin UI and JavaScript modernization initiative. 

Conclusion

There is so much more that Drupal modules provide for your website to become an interactive one. All of these modules are actively maintained and compatible with drupal 9. You can use them to build something great. For an interactive and great user experience for your website reach out to us at [email protected]

Sep 25 2020
Sep 25

Sometimes the Road of Life Takes an Unexpected Turn and You have No Choice but, to Follow it to End Up in the Place You are Supposed to Be.
- Anonymous

A thought that’s crossing my mind while I type this is I never expected myself to be here as a writer. For me, since childhood, I have always been told that I’d end up being a doctor. And I always thought I would. But as I grew up, I realized that it wasn’t what I actually wanted at all. Life did take an unexpected turn and I am where I should be today. Something like this hits each one of us at a point in life. 

At OpenSense Labs, we have Lakshay, who started off working as an Electrical engineer and went on to become an Acquia-certified front end developer. Let’s look at his experience with OSL and Drupal! 

on the left side of the circle is an electrcial engineer and on the right is a person in front of the screen


Tuba: So Lakshay, I heard you pursued electrical engineering. Tell me about your education.

Lakshay: I switched to three different schools in the last 3 years of my school life. I wanted to start something of my own while I was in high school but my parents always told me I lacked experience. Although I studied electrical engineering, I have had a lot of interest in developing websites for a very long time.

Tuba: How the shift to web development finally happened and how did it all begin at OpenSense Labs?

Lakshay: A very old friend of mine was already working with OpenSense Labs. He told me that he was working with a web development company and asked me to come and join them. So, I gave it a shot and joined OSL. When I reached there, I had no idea what I had to do, because everybody there was a professional developer. So I joined them as an intern and started watching tutorial videos and studying how to build a website and then tried coding it and showing my work to senior pros like Vinit and Pritam at the end of the day. After 3 months of the internship, I was hired as a full-time front end developer. A year later, I was an Acquia-certified front end specialist. I was promoted to the position of a senior frontend developer. Since then a lot of interns have worked under me and I’ve trained them sharing whatever I learned during my early days as an intern.

Tuba: That’s amazing! How is your experience with Drupal?

Lakshay: It’s been 3 years now and the experience so far has really been great. The Drupal community is really amazing. I’ve attended many camps where I got a chance to interact with people working across the globe.

I got to learn about different emerging technologies and how Drupal is rising with these technologies thereby embracing innovation always. I’ve presented sessions in DrupalCamp Delhi 2019 and DrupalCon Amsterdam 2019

Tuba: Do you think you made the right decision?

Lakshay: I definitely think I made the right decision. While I was working in the electrical industry for 6 months, it felt like a job, but working here felt like something that I willingly wanted to do. I’m following my passion, working with Drupal.

Tuba: That’s great! Thank you for your time Lakshay. It’s been great talking to you. I hope people are inspired to make decisions and accept the turns that life takes as you did. 

These turns can be the most challenging thing to experience, but it is the starting point of something great in your life. There is always light at the end of the tunnel, take your time to find it! The journey, I promise, will be way better than the destination. Good luck!

Sep 23 2020
Sep 23

'History is important, but what we do today matters the most, and we realize that.'

At OpenSense Labs, we make sure you move on from the old glitches you've faced with your website and its performance and give it better and smoother user experience. We use decoupled Drupal to give your website versatile and structured content that the web experiences need. 

Brands these days communicate with their customers, not only through the websites but also through multiple touchpoints. Decoupled Drupal serves content through an API to be consumed by other mediums like mobile applications, kiosk displays, IoT, wearables, etc. Headless Drupal is not a new phenomenon, but with the rising digital era, it is getting more and more important. You can either go for a progressively decoupled approach or fully decoupled approach based on your project requirements and we have successfully launched websites using both the approaches.

Let me take you through the websites created and revamped by us using decoupled Drupal. 

Paramount software solution

Home page of Paramount software solution


Paramount software solutions, being one of the leading IT Service providers in infrastructure management, application, blockchain, architecture, etc, protects your investments and enhances your productivity. It provides dependable and integrated business solutions for small and large enterprises. 

Paramount Software Solutions wanted to build a portfolio website that would act as the gateway to its impeccable services. We built the site using Drupal’s powerful capabilities keeping in mind, rich user experience, and streamlined content management.

The need for a headless web application for Paramount software solutions was why Drupal was chosen in the first place.

Simplified content workflow, high web performance, high-level security, and SEO were taken into consideration for building the website. After doing a detailed analysis and taking a lot of feedback from the clients, OpenSense Labs decided to develop this website as a fully decoupled application.

With Drupal, we made sure that the security of the website remains top-notch.
JSON:API and JSON:API Extras modules were used to gain a full rest API for the Drupal application and it was ensured that the resource properties like alias fields, API path, etc could be altered easily. 

The RESTful Web services module was used to provide customizable and extensible RESTful API of data governed by Drupal. 

HTTP basic authentication was used to offer the functionality of authenticating username and password.

The full case study of Paramount Software Solutions is available on Drupal.org

AgWeb

Home page of AgWeb


AgWeb is the most influential web-property of Farm journal, which is one of the leading business information and media companies. AgWeb is an online platform for farmers to stay informed about the news of crop and livestock farming, live future trading data, market assessment, ag policy, weather forecast, and more.

AgWeb wanted to enhance its website and needed a solution to keep up with the changing landscape of web technologies. This required a complete migration of their old .NET based legacy website into the state-of-the-art CMS of Drupal and then retain the wonderful search engine rankings gathered by it over the years.

The main objective here was to enhance user engagement and brand identity. In this process, a lot of feature upgrades had to be done to make it simpler for future development.

By choosing Drupal 8, AgWeb could tailor its media solutions. It became easy to create a listing with the assistance of views and enhance speed, scale, and stability. 

We planned the project in sprint-based development cycles and for the successful migration of content from the old .NET website to Drupal 8, the Scrum process was applied. 

Progressively decoupled blocks were used to build features like search and crop comments. We were able to improve the on-site search with the help of React and Elasticsearch

Drupal 8 gave the website a modernized look which resulted in higher user management. Drupal's support assured that the page load time of the website is much lesser than the old one. The website's Google rankings accelerated with the help of SEO enhancements.

The full case study of AgWeb is available on Drupal.org

Produce Market Guide

Home page of Produce Market guide


The PMG is also a product of Farm Journal. It is a resource that produces commodity information, data analysis, and trends. This platform shared information on fresh fruits and vegetables and is also the industry's leading source of information and news.

There were not many features required in the architecture, as the PMG website was already based on Drupal. So, the joint client-vendor system decided to progressively decouple the search functionality. This new search feature was built using React and elastic.

Drupal was chosen because of its flexibility. The customer already had prior experience with Drupal. And the built-in API-first support and easy third-party integration added to the many reasons why Drupal should be used again.

They wanted us to build search applications with facets and track user activities for personalized and smooth user experience.

Elastic backend architecture was developed using the ElasticSearch Connector module. Then, the biggest challenge was to add the SearchKit and React in the same search. SearchKit was used to design and develop the front end, the logic, and the project structure.

The new PMG website now takes less time to load than before. The project did not even take a month to complete. We followed the principles of Scrum and Agile by arranging themselves according to their needs.

The full case study of Produce Market guide is available on Drupal.org

Conclusion

Decoupled Drupal has helped websites in many ways and we love creating and revamping websites using it. It gives a content-rich experience, with a great presentation layer. 

If you love what we have done to these websites, and wish to have the same experience for yours, contact us at [email protected]

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