Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough
Jul 28 2021
Jul 28

Drupal is among the standard Content Management Systems (CMS) used in designing more complex websites. It uses advanced features to aid the developers in designing beautiful websites. It is also known for frequent updates, and the recent update to Drupal 9 is necessary for the marketplace. However, businesses are worried about the approximate cost to migrate from Drupal 7 to Drupal 9. We will discuss this aspect along with various considerations for the migration project.

Why must you Migrate to Drupal 9?

End of life is around the corner

It would be best if you upgraded the CMS at regular intervals. It helps add new features to the website and offers several core modules for better user interfaces. Performance enhancements are another reason you should go for upgrades. Moreover, any security vulnerabilities in earlier versions are also plugged through the upgrades.

It is essential to note that Drupal 8 is reaching the end of its life in November 2021 and Drupal 7 reaching end of life in November 2022, and it is necessary to migrate the website to Drupal 9. Web admins will not receive support or fixes from the Drupal community after this timeline. There are more than 565,000 websites still on Drupal 7 and more than 267,000 on Drupal 8, and they must be migrated in the near future for the sites to receive security updates.

Reasons to Migrate to Drupal 9

There are other reasons for your benefit when you migrate to Drupal 9. The new Drupal version has led to improved performance of the website. Few web admins may be awaiting a stable version of the upgrade, but there are no severe changes in the features. We will discuss some of the new features in detail.

Faster & Better Performance

With search engines preferring mobile responsive websites, Drupal 9 supports responsive images, leading to lesser data consumption. You can define several workflows, and the BitPipe enhances page viewing performance. Moreover, the upcoming versions will only provide a better user experience and faster websites.

Backward Compatible

The earlier versions of Drupal were not compatible with previous versions. However, Drupal 9 is consistent with the earlier version and preserves Backward Compatibility. It will essentially mean that most of the contributed modules in Drupal 8 will be compatible with the new version. The latest version can use the modules, data, and configuration from the earlier version. 

Cleaner Code Base

One of the best benefits of Drupal 9 is that it does not contain any of the deprecated code. Thus, the websites will have a clean codebase, and you must remove the deprecated code from the earlier versions before migrating to Drupal 9. It will help if you gradually remove the deprecated code from Drupal 8, and it will help make the Drupal 9 upgrade simpler.

Easiest Upgrade

Software experts are stating that the Drupal 9 upgrade is easy and is like a breeze. Earlier, the upgrades implied a time-consuming process that led to huge costs. In addition, there were configuration changes and involved content migration and porting modules to allow them to function as needed. One of the key targets for the Drupal 9 release was to ensure easier upgrades in future.

Understandably, future Drupal releases could be such that upgrades would not need major migration activities.

Symfony & Twig Updates

There have been upgrades in the Symfony and Twig software too. As they also see an upgrade, migrating your Drupal website to the new version is necessary. Other dependencies are getting updated too.

The Drupal Migration Cost

Website migration projects can expectedly be time-consuming. First, the migration team must find out the projected issues in the process. The timeline can usually depend on the size of data on your website.

Time Taken to Migrate

As with any other migration project, most web admins are worried about the time of Drupal 7 to Drupal 9 migration. The migration timeline will depend on the amount of data and content on the website. For example, it is estimated that a website without any customized modules and a few content types can be migrated within a few weeks. However, complex websites can take longer to migrate to Drupal 9.

The migration project involves migrating the content and the configuration to a new instance of the website. The content can cover various posts, files, blogs, and articles, etc. Therefore experts analyze and decide on the entire migration process. 

It is essential to take note that the custom modules must be written according to Drupal 9. This activity can take much time during the entire process. However, several techniques can be automated, as there are several modules to help in migration. Manual recreation may be needed too. Some projects may need field mapping while importing the website data present in different formats.

When the data is migrated, the migration team must check for errors and ensure that the correct data has been entered in the fields. Once everything is in order, you can go live with the migrated website.

Cost of the Migration

You must bear in mind that any migration activity can be tedious. It is also difficult to judge the precise estimates of Drupal 7 to Drupal 9 migration. The cost associated with the migration will depend on the content and design of the website. It will also depend on the functionalities involved and the associated custom code.

The migration strategy can be created keeping in mind the website's content, the investments involved, and the timeline. It is very important to appropriately analyze the requirements in the migration process to minimize the risk of cost escalation. Once the various features and functionalities are listed out, the developer can start the migration activity.

As mentioned earlier, it is difficult to predict the time of Drupal 7 to Drupal 9 migration. Some of our quickest migrations for medium-sized websites took around 2.5 - 3 months. On the other hand, a website of high complexity took about 5 - 6 months.

The migration to Drupal 9 is easier once you have migrated to Drupal 8 already. Drupal 9 is mostly like the last minor Drupal 8 release - Drupal 8.9. There are no huge configuration modifications or content migration and requirement to port modules. The new Drupal 9 release was mostly built on Drupal 8 by removing the deprecated unwanted APIs and updating the dependencies.

It is necessary that you update the website to the latest version of Drupal 8. Drupal 8.8 is fully compatible with Drupal 9. Hence, it is suggested to update to at least Drupal 8.8 before the migration. Our Drupal migration experts have the right experience across diverse Drupal projects. We expect that a medium complexity website can be migrated from Drupal 8 to Drupal 9 within 1 month. A high complexity website could take around 2 - 2.5 months to migrate.

Considerations before the migration

Revisit the Functionalities

You must finalize the features that you want on the new site. For example, do you wish to change the newsletters, forms, etc.? Also, it would help if you considered whether you want to make changes to the existing appearance of the website. The decision on migrating whole or part of the content must be taken as well.

Developer Skill Set

Are the developers skilled enough to carry out the migration activities? If they are not, then they must undertake adequate training before setting out with the migration. In addition, they must know about the migration's dependencies and be aware of the core code in Drupal 9.

Compatible Hosting Environment

The migration needs to keep in mind that the hosting environment must be compatible with the new Drupal version. The team must ensure that the required changes are carried out in the hosting environment to ensure a hassle-free upgrade.

Time and Budget Considerations

It is suggested that you understand the time of Drupal 7 to Drupal 9 migration. The timeline must also consider the resting of the new site and checking how the SEO of the new site is working.

Conclusion

Businesses must readily migrate their Drupal website to the latest version. The new version is laden with several valuable features. It is, however, difficult to assess the actual cost of the Drupal 7 to Drupal 9 migration. It depends on the size of the website and the content and features you wish to migrate.

We have undertaken several projects covering Drupal 8 to Drupal 9 migration within 200 hours. So if you are willing to migrate your website to Drupal 9, we are just a phone call away.

Jul 23 2021
Jul 23

Websites are increasingly becoming an essential marketing tool for businesses. It helps companies reach out to a more influential audience at a relatively lower cost and enhance conversion rates. Websites are also used as a means of providing information about the portfolio of solutions provided by businesses.

As competition increases, there is a need to enhance website ranking during a keyword search. Therefore, you must adhere to the best Google ranking factors to ensure your website ranks high during a keyword search. We will take you through some of the Google ranking factors in this article.

Technical SEO Google Ranking Factors

Ensuring that you are adopting technical SEO best practices can be daunting. Therefore, you may take the help of a professional web design and development company to ensure you adhere to the best practices.

Easy Crawling for Search Engines

One of the critical Google search engine ranking factors is the use of a sitemap. It helps a search engine to index the web pages more thoroughly and quickly. It provides better visibility of the web pages to the users. The crawlers can understand the structure of the website better and can ascertain where the pages are located. You can utilize software like Screaming Frog to check the presence of the sitemap.

You must also check the Sitemap section at the Google Search Console to inform you if the sitemap was submitted and the number of indexed URLs. It can also notify you if there are any problems encountered. You can also check the sitemap for errors by using various XML validator tools.

rendering queue

 

The robots.txt file allows the crawlers to understand the URLs they can access on the site. The instructions enable the crawlers to understand the URLs that are allowed or disallowed from being crawled. If you have any pages that you do not wish to be crawled can be mentioned in this file.

The Site Must be Responsive

As the number of mobile users increases, search engines like Google ensure that the websites provide a seamless experience for them. Therefore, website developers must ensure that the website can be viewed seamlessly on all devices by the visitors. If it does not, the SEO rank of your website is bound to fall.

Mobile responsiveness has become one of the critical google search engine ranking factors since 2015. Google has plans to move all sites to mobile-first indexing and crawling. It would mean developers must consider the mobile design, too, as Google would use this version to rank websites. In addition, you can use the Search Console to check if there are any mobile-related errors on the site.

The Page Load Speed Should be Optimal

Are you aware that most of your visitors will wait for only three seconds for a website to load? These visitors will move to your competition and may never return to your site. Moreover, the bounce rate will increase and is an important SEO ranking factor too. You can use various tools like Google PageSpeed Insights and GTMetrix to inform you about the page load speeds.

One of the main optimizing factors would be to identify the heavy images. You must use plug-ins to ensure the photos are of optimal size. If the images are optimized correctly, it can help to increase site speed.

Use an SSL Certificate

Google had come up with an update in 2014 that showed its preference towards secure websites. The update stated that if all other factors remained the same, Google would prefer HTTPS websites. It is mainly as the certificates that install an SSL certificate encrypt the communication exchanged with the visitor's browser. This update is in line with Google’s mission towards a safer internet browsing experience for its users.

The Use of Schema Markup

An essential factor that SEO executives must remember is the use of Schema Markup. It helps the search engine to have a better knowledge about specific sections of the text. It is ideal when you plan to do local SEO. You can also use it to inform Google where your business is located.

You can use it to present meaningful information to Google about a web page. If you use the schema markup intelligently, you can get into Google Knowledge Graph. It also helps in showing up visually enhanced search results for your website. It also supports semantic search and enhances the authoritativeness of your website.

schema markup

On-page SEO Ranking Factors

There are also specific Google ranking factors that are more page-specific.
 
Use of Relevant Keywords

All SEO experts will tell you about ensuring that your website content is written, keeping the relevant keywords in mind. The keywords essentially search terms used by users and form the basis of the content on your website. Most marketers also feel it is a high-impact driver of website traffic and is among the key Google ranking factors. When writing content for a page, always keep in mind that you can have only 4 - 5 keywords on a page. Also, keep the keyword density best practices in mind.

The Need for High-Quality Content

One of the critical Google ranking factors is the high quality of content on the website. The content must be fresh, unique, and helpful for users. While you must ensure it is optimized for SEO, always ensure that it must be valuable for the website visitors. 

You must create original content and always undertake a duplicate check before publishing on your site. It would be best if you considered the length of the content too. While there is no word limit set for the content, it must neither be too short nor should it be too long. Most SEO plug-ins require your content to be a minimum of 300 words. Apart from the content quality, it must be well-organized and structured using proper tags. 

Optimizing the Title Tags and Meta Description

The title tags and the meta description show up on the Google SERP that allows a user to understand the web page's contents. You must ensure that you optimize the content you write here to help you draw more visitors to your website. You can use the keywords here as well.

Google can pull the information to create snippets that preview the content on the page relating to the search term used. You can also use the keywords for the image alt-text, and if you optimize it, you can also move the images higher up during image search. Also, do not use jumbled-up URLs as they are not SEO-friendly. If the URL has a simple structure, is concise, and contains the optimized keyword, it will be easier to rank these pages higher in search ranking.

Off-Page Ranking Factors

The search ranking of your website is also dependent on few entities outside your website. Some of them are other high domain authority (DA) websites, social media, etc.

Use of Social Bookmarking

The foundation of the ranking algorithm requires you to ensure that your website has backlinks from high DA websites. It is an essential SEO ranking factor, and you must also keep in mind that the backlinks must be relevant and related to the content on your website. While you may have backlinks from high DA sites, you must also ensure that the backlinks are fresh. It is because the users prefer the latest news. However, it will depend on the search term used.

The Search Intent

One thing that Google does is that it does not rank the same content for all queries. The ranking also varies according to the search intent of the user. For example, if you are looking for a "how-to" guide, the web pages shown to you will differ when you search for the best gadgets. The content types are also critical for the search engine when it is ranking the web pages. The search engine also checks whether the piece of content covers what the user is expecting to see.

Conclusion

The search algorithm covers various factors that SEO managers must consider ensuring their website ranks high during a keyword search. While the number of such parameters may total over 200, we have covered the top SEO ranking factors believed to be used by Google.

If you are planning to design a new website, you must keep these factors in mind. You can also take the services of a professional web design and development company and discuss with their subject matter experts on these parameters.

Jul 19 2021
Jul 19

Are you willing to develop a mobile app for your business? This article describes various phases in mobile application development process. Read it for more information.

The increased penetration of smartphones has led to more mobile users. Businesses are also trying to cater to this new set of users by creating mobile apps and improving customer experience. As a result, there is an increased requirement for developing mobile apps, rapidly addressing this audience, and catering to their needs. However, to ensure the application's success, businesses must adhere to a robust mobile app development process. We will discuss the steps involved in the process in detail.

Stages of Mobile App Development Process

Here is now the detailed overview of each phase involved in mobile application development.

Research and Strategy

The process of mobile app development starts by deciding the strategy for why you will need the app. Many apps are an extension of the desktop application. Next, you must identify the audience and understand their likes and dislikes. Research and strategy must take up a significant amount of time in the initial stages. The demographics and behavioral patterns of the audience must be considered too. 

While doing your research, you must also check out your competition and assess how they are reaching out to their audience and the features they are offering. The information forms the background in deciding the goals and objectives that include a critical step in mobile app development. 

Planning and Evaluating the Feasibility

Once you have finalized the app's goals, you can now analyze the features you will need in the project. It is where the analysis of competitor apps is critical. You can include the features that are absent in your competition and include them in yours. Once you have identified the elements you wish to include, you must prepare a product roadmap.

The features must be prioritized based on their importance and grouped into delivery milestones. It is also essential to identify the technologies that you will require. You must also check whether the backend system will support the functionalities you wish the app to have. You can take the help of experts from a leading mobile app development company.

UI/ UX Design

The app design must follow the optimized workflows that will allow the users to use the app seamlessly. In addition, it must ensure customer loyalty and increase dwell time on the app. So, first, map the customer journey and visualize how the visitors will go through the workflows in your app. Then, create the wireframes and a storyboard to explore the mobile app and demonstrate the navigational workflows.

The wireframes will cover the app layouts along with the device-specific designs. During this process, you must also include the specific branding guidelines of your company, also called the Style Guides. It will cover the font and style to be included in the app. The design of the navigation icons and how the app will adhere to your branding guidelines will also be covered.

Based on the guides created, the mockups will be made based on the wireframes. You can discuss with the client and finalize the aesthetic and the workflows. The static mockups can be turned into prototypes with high-quality tools. It can help stimulate the workflows that the final app will use. The user experience can also be assessed.

Development

Before the actual development of the mobile app starts, you must define the architecture and finalize the technology stack to be used. It is the most critical portion of the mobile application development process. Next, the backend technology covering the database and various other server-related objects is finalized. Next, the APIs to be created are assessed too. Finally, an intuitive user interface design is prepared for the front-end using the selected technology.

The developers will set up the project, and the pieces of code are checked before being merged into the project. Then, the app could be released to a small group of external testers for further testing of the code. If you are developing a complex app, you can use the agile methodology that helps in continuous improvements and progressive development.

Testing

The testing phase forms an integral part of your mobile app development initiative that ensures that the app is secure and stable. A team of expert testers must create appropriate use cases based on the industry and the various workflows included in the app. It will help the testers to record the results involving evaluation of the software quality. It will also help them to track the fixes in the code that must be done.

Your Quality Assurance team must be an integral part of this process. The application is now tested for compatibility, usability, performance, stress, and security, etc. The mobile app must undergo several tests to ensure a high-quality mobile solution. Some of the testing processes to be followed are:

  • User Experience Testing
  • Functional Testing
  • Device and Platform Testing
  • Security Testing

Deployment and Support

When the app is ready, you must choose the time to launch the app. After that, you can wish to publish the app on the Google Play Store or the App Store, or both. Of late, the Amazon App Store is also famous. The process involved in publishing on the different mobile app stores can vary across the various platforms.

Before publishing, you must have the metadata content ready. Keep in mind that the content must be optimized for the App Store you have chosen. You can also upload various promotional materials like videos and graphics. Some other necessary information like any geographic restrictions, configurations, and pricing may require uploading.

With Google Play Store, there would be a time lag before your mobile app is formally published. It is not the end, but only the beginning of future changes. You will receive feedback from the users that can be used as feedback for future improvements. 

App Maintenance and Future Developments

Once the app has been published, the app's performance can be tracked by deploying adequate control points through KPIs. You can detect the crashes, downloads, etc. long with other metrics as set by you. However, your work on the app continues through the support activities and future developments needed. You must keep in mind that the enhancements must be uploaded onto the app store platforms in the same process as before.

Conclusion

Mobile app development is a continuous process that does not stop with the app being published on the app stores. You must take the help of a leading mobile app development company that can help you visualize the app and suggest the features and functionalities needed through adequate research.

We have been providing mobile app development services to some of the leading businesses cutting across different industries. You can reach out to us to start a discussion about how we may be of help.

Jul 13 2021
Jul 13

With Drupal 8 reaching its end-of-life on Nov 2, 2021, you must upgrade to Drupal 9 before November to keep your site secure. Let's have a look why migrating now is best option for your web platform.

Drupal is among the most robust CMS that is seeing increased use in complex websites. Like most CMSs, Drupal is upgraded regularly to add new features for a holistic visitor experience and added security features. Therefore, it is always helpful to have the CMS upgraded to the latest version. However, the impending end of support of Drupal 8 on 2nd November 2021 requires you to go for a Drupal 8 to 9 upgrade quickly.

Why must you Upgrade to Drupal 9?

Drupal 8 is Nearing the End-Of-Life

One of the prime reasons you need this upgrade is that Symfony 3 and Drupal 8 reach the end of life. It is happening even before Drupal 9.3.0 is released. It is also essential to know that the upgrade from Drupal 8 to Drupal 9 is more straightforward than the earlier versions. Once the support is lifted, there will be no bug fixes, security updates, or creation of new features or modules. It will be challenging to protect the website from cyberattacks or stay ahead of the competition. The Drupal 9 upgrade will provide you with support from the Drupal community.

drupal 8 end of life - upgrade to drupal 9

(Source: Drupal.org - How to prepare for Drupal 9)

Few Unique Features in Drupal 9

Let us learn about some of the critical features of Drupal 9 that will provide an impetus for a quick upgrade.

  • It is Backward Compatible

    Drupal 9 is compatible with its predecessor and can use the modules and configurations used in Drupal 8. It will ensure that the performance of the system will not be affected. Your website will operate faster and with clutter-free technology.
     

  • No Deprecated Code

    One of the issues of migration projects is the need for a cleaner codebase. No deprecated code will be supported and used in the Drupal setup. When you upgrade to Drupal 9, there will be a cleaner codebase and improved site performance.
     

  • New Versions of Symfony and Twig

    The older versions of these platforms will be removed, and you must upgrade to the newer versions. It helps to enhance website security and enhances the developer experience. For example, there will be an upgrade to Symfony 4 or 5, while there could be an upgrade to Twig 2.0.
     

  • Multi-Lingual Support

    Global corporations have websites in the language of the country where they are operating. It helps them to talk in the language of the audience. Drupal 9 allows multi-lingual support, and the editors can manage language versions conveniently.

Tips for Upgrading to Drupal 9

When you upgrade to Drupal 9, you must ensure that the version is updated. Are you aware that the upgrade from Drupal 8.9.0 to Drupal 9 would involve updating Symfony and Twig? It will also include the removal of the deprecated libraries and code.

As a first step, you must ensure that the site runs on a stable version of Drupal 8. The Upgrade Status module can help check the contributed module's compatibility and assess the system requirements. The custom modules must be checked for the use of APIs or deprecated libraries.

While you are still on Drupal 8, you must upgrade the contributed modules and the themes to the Drupal 9 compatible versions. You can use the Upgrade Status module to generate a report on the readiness of the modules for the proposed upgrade to Drupal 9.

If you are using custom themes or modules, always check if they are compatible with the new version of Drupal. You can scan using the Upgrade Status module and remove any deprecated APIs that may be present. Moreover, you must also check whether the PHP, MySQL, and the web server are running on compatible versions.

How can you upgrade to Drupal 9 from Drupal 8.7 or earlier?

You must migrate the Drupal 8 site to Drupal 9 to see the end of life in November this year. When you have decided to relocate, you must first update the Drupal 8 site with the most recent version of both the contributed and core themes and modules. In addition, the site must be upgraded to at least Drupal 8.8.0 as earlier modules are unlikely to be compatible with Drupal 9.

Before you plan the upgrade to Drupal 9, you must have an inventory of the contributed modules, custom modules, and themes.

Custom modules: You can install drupal-check running as a part of CI workflow or running on the development environment. You will understand the activities to be performed to have the custom code compatible with Drupal 9. You can note down the modules which have a compatibility issue. Check whether you need them anymore.

Contributed modules: The contributed modules can be segregated into groups that will show the amount of effort needed. First, check the modules that have a Drupal 9 release. Also, check whether these would be significant updates or would they be minor ones.
The latest releases of the contributed module can often support both the versions of Drupal 8 and 9. Thus, the effort needed will be the least, and you can start from here.

You must update to the latest version of the core to allow the database to be ready for migration. The contributed modules will also be prepared for the Drupal 9 upgrade. Once all the components are compatible, you must update the core to Drupal 9 and run the update.php program.

How can you upgrade from Drupal 8.8 or later?

The themes and the contributed modules must be updated. You can use the Update Status module to check the compatibility with the Drupal 8.8 site. You can check the module’s project pages for the Drupal 9 upgrade. If the website has themes or custom code, always ensure they are not using any code that was deprecated in 8.8 and must be removed. When all the components are compatible, you can update the core to Drupal 9 and run the update.php.

Conclusion

Drupal is increasingly getting popular with heavier and more complex websites. In keeping with the trend of periodically upgrading Drupal, the advent of upgrade to Drupal 9 comes with several benefits. You must upgrade from Drupal 8 to Drupal 9 as Drupal 8 will see the end of life by November this year.

Are you looking for experts for migrating your website to Drupal 9? We are happy to help and are just a phone call away or contact our experts to get started on your Drupal upgrade today!

Jul 07 2021
Jul 07

The Ecommerce industry has grown during the pandemic. As a result, there is more demand for eCommerce website development. What are the factors to consider? Lets check it out in this blog.

The Indian E-Commerce Industry has Grown Enormously

The eCommerce industry is growing by leaps and bounds. It is expected to cross the US market by 2034. As per the latest Indian E-commerce Industry Growth Analysis, the eCommerce market is expected to reach revenues of US$ 99 billion by 2024, with a CAGR of 27% since 2019. The growth will be driven mainly by groceries, consumer electronics, apparel, etc. The competition is fierce, with several local and foreign entities jostling for space.

Several businesses are selling their goods online. The online shopping industry is bound to expand further due to the government's impetus on the Digital India program. As the prospects of the industry increase, there is also the need for high-end eCommerce website development services. The ongoing COVID-19 pandemic has also led to customers ordering more goods online.

Growth of eCommerce during the COVID-19 Pandemic

The curbs on movement and the lockdowns have led to more customers doing online shopping. It has helped to push eCommerce sales to heights never seen before. In addition, the use of reliable broadband and smartphone penetration has ensured that customers have a seamless experience buying online.

The use of next-generation technologies has also led to an increase in this sector. It has helped customers make better choices. The changed shopping traits will continue even after the pandemic. During this time, several more businesses have taken the online route. While some of them have turned into affiliates of renowned brands, some others have their eCommerce website.

Few Points to Consider before Developing your eCommerce Website

Aligning the Business Goals

Before taking the plunge, you must have a robust plan in place for your eCommerce business. It should cover the goals and objectives you have in mind. It is necessary because you can design the website accordingly. In addition, you must understand your audience and design workflows that will ensure the visitors can view their products quickly.

You can depute eminent eCommerce website development to help you design websites that can appeal to your audience. You can assess their buying habits and formalize the best campaigns that can lead to increased revenues. Discuss and finalize the features you need on the website with the subject matter experts. If you have the budget, you can include some of the killer technologies on your website.

Finalizing the Platform

When you are planning to design a customized website, you must take time to finalize the platform. A lot of it will depend on your business goals and the features you wish to have on your website. The entire eCommerce website development process will depend on this activity. You can start by analyzing the elements you need on the site. Analyzing your competition can also be an ideal way to initiate this process.

The platform you choose must accommodate the features you need on the website. The website must run on a unified platform that can support all the modules necessary for an eCommerce website. In addition, it must allow excellent customer experiences along with on-the-fly marketing offers and on-time client servicing. You can be in touch with the best eCommerce website development services providers, who can provide expert advice on the ideal platform for your online shop.

Finalize the Website Design

You must use the help of experts to ascertain the project requirements and finalize the project plan accordingly. The features you wish to have on the website can also have an impact on the overall design. Also, keep your campaign strategy in mind and the buying behavior of your audience. The feature additions can be made in phases too.

While designing the site, you must also consider the SEO plan. If you plan to transition your earlier website, always have experts chalk out the transition plan. Your design must define the responsibilities of the different resources allocated to the project. Setting a realistic timeline can help to assess the incremental progress of the overall project.

Choosing the Template and Plugins

Once you finalize the design, you must choose the theme of the website. Then, you must take the services of a renowned eCommerce website development company that can help you select your website's theme. There are several options available, and you must consider the products offered and the overall branding of your online shop.

While selecting the template, you must keep in mind the design of the homepage and the navigational workflows that you prefer. The theme color and the use of images must gel with your branding guidelines. You must consult with an expert to finalize the UX design that would help your customers. Finally, based on the features chosen, you must select the plugins that you wish to have on the site. 

Additional Points to be Considered

The Competition

Your business plan will never be complete unless you assess your competition. So always have a comprehensive overview of your competition and constantly have a keen eye on their website workflows and campaigns. It will help you have an overview of the steps you must take to stay ahead of them.

Website Security

One of the critical sections of eCommerce website development is to ensure that it is secure. As the eCommerce website stores a vast amount of data, hackers are quick to target them. Always keep in mind that the SSL certificate is valid and renewed on time. Use the latest antivirus and firewalls to protect your data. It would be best to have security processes in place to prevent unauthorized access to your data centers. Ensure that your employees follow password best practices.

Maintenance and Support

You must have a renowned partner to maintain your website. It will need added features to stay ahead of the competition. Have regular support contracts with an adequate level of expertise. Ensure that the agreement covers technology upgrades, quality and security updates, etc.

How can PWA help in better eCommerce Website Development and Grab Mobile Audience?

As the eCommerce industry sees an unprecedented number of visitors, businesses must stay prepared to provide unique experiences to website visitors. A progressive web app (PWA) can help you provide app-level UX to visitors. By leveraging web APIs, it can offer a native mobile app experience. A study among developers shows that at least 46% of them believe progress web apps to be the way forward.

progressive ecommerce website development and application

The PWAs can cater to all users and are responsive enough to fit into any device screen. They can be accessed by a broader audience and can provide speedy page downloads too. They use modern web frameworks that lead to reduced development costs and timeframes. Due to a better user experience, they lead to improved conversions rates too. 

Websites must provide an excellent experience for mobile visitors. Search engines like Google give preference to the mobile experience. Moreover, Google has been supporting PWA since 2015. You can download a progressive web app on the mobile home screen for an improved experience. Push notifications can also be used to enhance the experience.

Conclusion

The ongoing COVID-19 pandemic has led to a shift in customer behavior, and more people are buying online. As a result, more companies are moving their business online and are experiencing increased revenues. It is also essential for them to engage a renowned eCommerce website development agency that can guide them in moving to a customer-friendly website and improve conversions.

We have discussed some of the points to consider before you can come up with the website. It will be helpful for you to beat the pandemic and see your revenues soar. Our experienced team of website developers can suggest various ways of developing a creative website for you. Reach out to us for more details.

Jul 05 2021
Jul 05

Drupal is an open-source CMS that helps websites have rich features that help to increase visitors. More than a million websites are on Drupal, but web admins are still worried about Drupal website security. Most websites request visitors for their personal information for various reasons. They also store their login information, while e-commerce sites also store the financial information of the visitors. Therefore, it becomes necessary to ensure the platform is secure to prevent a data breach.

  • Keeping the Modules Up to Date

    There are frequent updates in Drupal, and the upgrades plug the security gaps in the earlier versions. Like all other applications and CMS, you must always upgrade the website to the latest versions of Drupal. You can download the newest version over the Drupal repository, and they usually come with several new security features.

    You must always use only trusted modules and themes to ensure a secure Drupal website. The web admin can readily check for the available updates from the Drupal admin and download them. When you plan to update the Drupal website, always take a reliable backup of the site.
     

  • Have a Backup of the Website

    There could be an unforeseen event that may cause damage to the website. While such events cannot be foretold, web administrators must be prepared for them. The damage can be mitigated by taking frequent backup of the website. You can use the Backup and Migrate module for handling the backups, and it should be high on the Drupal security checklist.

    You can have both online and offline backups of the website. The default setting can allow you to have a download of the backup but can also make changes as per your needs. The Backup and Migrate module enables the transfer of the backup files to a pre-set address. After making the changes, you must click on “Backup now”.

    There are advanced backup options, including providing a timestamp to the file, encrypting the files, and changing the compression format. In addition, the Schedules tab can allow editing of the backup schedules as per the requirement. You can also use the CLI method for backup that can be done in two ways, viz.

  1. Using Crontab and Native Commands based on the backup
  2. Using Drush in combination with the Crontab
  • Follow a Strong Password Policy

    Strong passwords are the essence of website security. Your company must have a robust password policy that will ensure that the users use strong passwords for their access to the website. The passwords will be used by the web administrators and the users too. All of them must have strong passwords that follow global best practices.

    Always ensure that the passwords provide strength through complexity and combine characters and alphabets but not necessarily in a sequence. The Password Policy module can define the constraints that should be met before the changed password of a user can be accepted.
     

  • Login Security

    You must cap the number of login attempts at a time, and versions above Drupal 7 allow this feature. The Login Security module provides access control that can deny IP access to the entire website content. The administrator can also deny access to specific IP addresses permanently.

    Emails can also be sent to the administrator to know when password or account guessing is happening. Any unexpected login behavior can also be intimated. The Login Security module can also disable the login error messages of the Drupal core. There is an option whereby the users can see the last login along with the timestamp.

    A Flood Control module acts as an interface for the flood control variables. It allows the administrator to remove user IDs and IP addresses from the flood table. The automated logout feature allows the user to be logged out after a predetermined time of no activity. In addition, there is an ability to ensure role-based timeout or disabling timeouts based on assigned roles.
     

  • Setting up the Two-Factor Authentication (2FA)

    The two-factor authentication mechanism requires a physical device in your possession. As an additional security feature, the user must enter a code to log in. The code would be sent to the device selected by the user. It is easy to set up this additional feature using the 2 Factor Authentication module of Drupal.

    There are 15+ 2FA methods, including the Google Authenticator. The features include IP whitelisting, domain-based, role-based 2FA. Even if the registered device is lost, alternate login methods like OTP over email and security questions are supported.
     

  • Limit the Access to User Accounts

    One of the ideal Drupal security best practices is to limit access to the account. The users who have access to the back end add to the security risk of the website. The web admins must restrict the access to only the developers who need to access it, and that too for a specific time. The admins must check the user accounts and stay aware of who all have full access to the back end and whether they require the access anymore.

    Roles can be assigned to the users, and the setting can be customized. Apart from the administrator rights, you can allocate these rights to users too:

  1. Provide read-only access without the ability to change content
  2. Add content without any modification rights
  3. Modify or add content
  • Spam Protection

    To ensure a secure Drupal website, you must protect it from spam. Drupal has anti spam features that keep it safe. The Honeypot module prevents spam bots from completing forms on the site. It is effective against several different spambots and caters to all types of forms on the site.

    Antibot is another module that prevents form submission by bots. It can also prevent spam submissions and can protect the forms while continuing to cache the page. It does not require any integrations and works on mobile devices too.

    The use of captcha has long been the ideal way to block bots. The Captcha module prevents spam submission by bots and can be used by any user-facing web form. In addition, there are other spam filtering solutions like the Antispam module that can ensure Drupal website security using the Akismet antispam services.
     

  • Ensuring the Drupal Core is Secure

    The core should always be updated to the latest version. You can follow the Drupal Security team on social media channels for alerts on updates. A Security by Design framework allows designing the website such that the impact of any vulnerability is minimized. The security best practices must be followed at the architectural level.

    The Paranoia module in Drupal helps to prevent an attacker from gaining additional permissions on the Drupal site. It identifies the vulnerabilities and notifies the web admin when the hacker tries to evaluate the PHP through the web interface.
     

  • Database Security

    As a security precaution, you must block access to the critical files at the back end. You can change the table prefix to make it difficult for an intruder to guess and initiate SQL injections. The table prefix can be changed when installing Drupal.

    While setting up the database, click on the “Advanced Options”, you will come across the host, port number, and the Table name prefix fields. Insert the table prefix there. If you have named the database, change it, and make it more difficult to guess.

    The administrator must restrict access to the server while constantly monitoring the server access. The server signature must be hidden, too, and keep the port numbers hidden from public access. As a general feature, always keep the core updated to the latest version.

    Drupal also allows you to encrypt the database. You may encrypt parts of the database or the whole of it. The Drupal configuration can pass the encryption laws or privacy standards.
     

  • Install an SSL Certificate

    It is essential to install an SSL certificate to protect your website. Moving to the HTTPS protocol will ensure that the communication exchange with the visitor's browser is encrypted. No third party can have access to this information, and the source is authenticated too. It can prevent man-in-the-middle attacks and ensure that your website is safer. Moreover, it can also help in SEO and improve site performance.

Conclusion

There is a need to improve the security of your Drupal website. You can start by having stringent password policies and keeping Drupal up to date. You can also deploy security plugins and use an SSL certificate. We have discussed the ways you can keep the website secure. You may also reach out to us to initiate a discussion with our experts about how to secure your Drupal site. We will await your call!

Mar 01 2021
Mar 01

This is part 3 of the blog. Here we will continue our discussions on the other features and changes in PHP 8.

Stringable interface

The new Stringable interface which is introduced in PHP 8 is now automatically added to all the classes which implement the __toString method.

`PhpToken` Tokenizer class

The new PhpToken class which is introduced in PHP 8, provides an object-oriented approach to tokenizer results.

The return value is an array of PhpToken objects.

abstract methods

Previously, PHP would not allow us to declare a private abstract function in any PHP version. That has now changed with PHP 8. It allows us to declare a method as abstract even if a method with the same name exists in the parent class.

For example:

class ParentFoo {
    private function demo() {}
}

abstract class ChildFoo extends ParentFoo{
    abstract protected function demo();
}

Before PHP 8, the above would produce the following error:

Fatal error: Cannot make non-abstract method Foo::test() abstract in class ChildFoo in ... on line ...

Variable syntax tweaks

From the RFC: "the Uniform Variable Syntax RFC resolved several inconsistencies in PHP's variable syntax. This RFC intends to address a small handful of cases that were overlooked."

ext-json is now always available

Previously compiling PHP without the JSON extension enabled was allowed but that is not the case anymore. This is a healthy change in PHP 8. 

If the composer.json file already has PHP 8 in the required parameter then the ext-JSON is no longer required to be manually added.

{
   "require": {  
       "php": "^8.0",  
-       "ext-json": "*",  
   }
 }

Concatenation takes precedence

A line of code such as this:

echo "sum: " . $a + $b;

Would be previously interpreted like this:

echo ("sum: " . $a) + $b;

And in PHP 8, it is interpreted like this:

echo "sum: " . ($a + $b);

Reliable numeric strings

From the RFC, “all strings which currently emit the E_NOTICE “A non-well formed numeric value encountered” will be reclassified into the E_WARNING “A non-numeric value encountered” except if the leading-numeric string contained only trailing whitespace. And the various cases which currently emit an E_WARNING will be promoted to TypeErrors.

Reliable string to number comparisons

From the RFC, “0 == "foobar" returns true. This RFC proposes to make non-strict comparisons more useful and less error-prone, by using a number comparison only if the string is numeric. Otherwise, the number is converted into a string, and a string comparison is performed.

Mar 01 2021
Mar 01

This is part 2 of the blog. Here we will discuss the other features and changes in PHP 8.

Mixed type

The mixed type was already being widely used in DocBlock comments. In PHP, a missing type can be due to a lot of reasons:

  • A function returning null or nothing.
  • Expecting one of several types.
  • Expecting a type that can’t be typed hinted in PHPbackward-incompatible.

mixed itself means one of the following types:

  • array
  • boolean
  • callable
  • int
  • float
  • null
  • object
  • resource
  • string


mixed can also be used as a parameter or property and not just as a return type. Since mixed already includes null so it is not allowed to make it nullable. On doing so, the following error will occur:

// Fatal error: Mixed types cannot be nullable, null is already part of the mixed type.
function myFunction(): ?mixed {}

mixed type can be used to indicate that it accepts any type, or can return any type. In a class/interface context.

function myFunction(mixed $var): void {
    var_dump($var);
}

Static return type

static is a new return type in PHP 8. The static return type declares an object of the called class will be returned. 

class Foo {

    public static function myFunction(): static {

        return new static();

    }

}

Error handling improvements

Internal functions now throw exceptions on type errors or value errors. This is a backward-incompatible change.

throw in expressions

It was not possible to throw exceptions from an expression (e.g. a ternary statement) before PHP 8. It is now possible to do so in PHP 8.

$var = isset($_GET['value'])
    ? $_GET['value']
    : throw new \InvalidArgumentException('value not set');

catch exceptions only by their type

We can catch exceptions by their type, without capturing the exception object.

try {}
catch(TypeError) {
  // Did not catch the $exception object
}

@ Error, Suppression operator does not silent fatal errors

PHP 8.0 changes the behavior of @ error suppression operator. Previously, it used to silence the fatal errors, which would lead to a script failure, due to the @ operator not preventing fatal errors, but rather hiding the error message display.

Default error reporting is set to E_ALL

The default configuration in PHP 8.0 is to show all error messages. It was configured to hide deprecation and strict warnings in older versions.

Default PDO error mode

From the RFC: The current default error mode for PDO is silent. This means that when an SQL error occurs, no errors or warnings may be emitted and no exceptions are thrown unless the developer implements their explicit error handling.


In PHP 8, the default error will change to PDO::ERRMODE_EXCEPTION.

Weak maps

A WeakMap holds references to objects, which does not prevent those objects from being garbage collected.

WeakMap and SplObjectStorage are quite similar. They both use objects as the key and allow arbitrary values to be stored. However, a WeakMap, unlike SplObjectStorage, does not prevent the object from being garbage collected.

Example of WeakMap:

class Myclass
{
    private WeakMap $cache;
 
    public function getAvalueFromCache(object $obj): object
    {
        return $this->cache[$obj]
           ??= $this->computeResult($obj);
    }
}

`::class` magic constant is now allowed on objects

In PHP, the magic constant ::class helps in resolving a class name to its fully-qualified class name. When this magic constant is used with a class name, use and use as statements will be resolved or the present namespace will be prefixed which would make it a fully-qualified class name.

For example:

namespace MyApp\DemoApp;

use MyFoo\Bar;
use MyBar\Baz as BBaz;

class MyDemo {}

// `use` statement is resolved:
echo Bar::class; // "MyFoo\Bar"

// `use` X `as` Y is resolved:
echo BBaz::class; // "MyBar\Baz"

// Current namespace is resolved:
echo Demo::class; // "MyApp\DemoApp\MyDemo"

Before PHP 8.0, the usage of the magic constant ::class was not allowed on objects and it would throw a fatal error like the one below:

$object = new Foo\Bar();
echo $object::class;

// Fatal error: Cannot use ::class with dynamic class name.
Now since it is allowed, we can do this and it would be correctly resolved at run time:

$object = new Foo\Bar();
echo $object::class;

// PHP 8.0+:
// "Foo\Bar"

Trailing commas now allowed in parameter lists and closure `use` lists

PHP 8 is also quite forgiving and allows us to leave trailing commas in parameter lists and closure use lists.

public myfunction(
    string $paramA,
    int $paramB,
    Foo $myobject,
) {
    // …
}

DateTime objects can be created from the interface

There is now a generalised way to convert DateTime and DateTimeImmutable objects to each other by adding DateTime::createFromInterface() and DatetimeImmutable::createFromInterface().

DateTime::createFromInterface(DateTimeInterface $other);

DateTimeImmutable::createFromInterface(DateTimeInterface $other);

Read part 3 of the blog here.

Feb 23 2021
Feb 23

PHP 8 brings a host of new features improvements, functions, and deprecations to the language compared to PHP 7. Among all of these new features, the JIT compiler is the one sharing the limelight. However, other features like syntax changes are also to be taken into account as it is these features that will have a greater impact on the practitioners.

Since there are many important changes that we would like to talk about, so we have split this blog into several parts. This is part 1 of the series.

Issues with the old code:

With PHP 8 we should no longer consider that it will be backwards compatible as it has a pack of syntactical changes. The latest changes include:

  • The Magic quote legacy
  • The real type
  • Reflection export() methods
  • Unbinding $this from non-static closures
  • implode() parameter order mix
  • hebrevc() function
  • mb_strrpos() with encoding as 3rd argument
  • money_format() function
  • convert_cyr_string() function
  • allow_url_include in directive
  • restore_include_path() function

Let us take a look at the major PHP 8 features:

New functions

str_contains()

When trying to find out if one string is a part of another string, you will generally use str_pos() which makes use of the needle in a haystack concept. It returns an integer showing the first position at which you see the needle. When it is returning the position of a string you simply cannot check for whether or not strpos() discovered it; if it returns “0” (positions are zero-indexed and begin with 0 rather than 1), then the conditional is going to treat it as a false value, and indicating it wasn’t found. 

This means you will have to wrap it in a condition such as “strpos($haystack, $needle) !== false.” Where false indicates that it could not find the string’s position. 

To counter this, PHP 8 introduces str_contains(), which returns a simple boolean indicating if the needle is present in the haystack.

So instead of doing this:

if (strpos('string with lots of words', 'words') !== false) { /* … */ }

You would now do this:

if (str_contains('string with lots of words', 'words')) { /* … */ }

str_starts_with() and str_ends_with() functions:

These functions are now incorporated into the core:

str_starts_with('haystack', 'hay'); // true
str_ends_with('haystack', 'stack'); // true

fdiv() function

The new fdiv() function does something similar as the fmod() and intdiv() functions, which allows for division by 0. Instead of errors, you'll get INF, -INF or NAN, depending on the case

get_debug_type() function:

The function get_debug_type() returns the type of a variable. get_debug_type() returns more useful output for arrays, strings, anonymous classes and objects. Sure it sounds like gettype() but there are benefits of the later. 

For example: calling gettype() on a class \Foo\Bar would return object. Using get_debug_type() will return the class name.

get_resource_id() function:

Resources are special variables in PHP, referring to external resources. One example is a MySQL connection, another one a filehandle.

Each one of those resources gets assigned an ID, though previously the only way to know that id was to cast the resource to int:

$resourceId = (int) $resource;

PHP 8 adds the get_resource_id() functions, making this operation more obvious and type-safe:

$resourceId = get_resource_id($resource);

Named arguments

Named arguments allow you to pass in values to a function, by specifying the value name, so that you don't have to consider their order, and you can also skip optional parameters.

function foo(string $a, string $b, ?string $c = null, ?string $d = null)
{ /* … */ }

foo(
    b: 'value b',
    a: 'value a',
    d: 'value d',
);

Constructor Properties

This syntactic change allows us to create data transfer objects. Instead of specifying class properties and a constructor for them, PHP can now combine them into one.

So instead of doing this:

class Money 
{
    public Currency $currency;
 
    public int $amount;
 
    public function __construct(
        Currency $currency,
        int $amount,
    ) {
        $this->currency = $currency;
        $this->amount = $amount;
    }
}

You can do this:

class Money 
{
    public function __construct(
        public Currency $currency,
        public int $amount,
    ) {}
}

Attributes allow us to declare meta-data for our functions, classes, properties and parameters. Attributes map to PHP class names (declared with an Attribute itself), and they can be fetched programmatically with PHP Reflection API.

#[CustomAttribute]
class Foo {
    #[AnotherAttribute(42)]
    public function bar(): void {}
}

This allows us to easily declare attributes/annotations which previously required storing them in doc block elements and parsing the string to infer them. 

The null safe operator

The null coalescing operator is similar to the ternary operator but will behave like an isset on the left-hand operand instead of just using its boolean value. This makes this operator especially useful for arrays and assigning defaults when a variable is not set.

It is not fully reliable as it doesn't work on method calls. Instead, you need intermediate checks, or rely on optional helpers provided by some frameworks:

$startDate = $booking->getStartDate();

$dateAsString = $startDate ? $startDate->asDateTimeString() : null;

With the addition of the null safe operator, we can now have null coalescing-like behaviour on methods.

$dateAsString = $booking->getStartDate()?->asDateTimeString();

Union types

Union types are a collection of two or more types that indicate that either one of those can be used.

public function myfunction(Foo|Bar $input): int|float;

Note that void can never be part of a union type since it indicates "no return value at all". Furthermore, nullable unions can be written using |null, or by using the existing? notation:

public function myfunction(Foo|null $foo): void;
public function alsomyfunction(?Bar $bar): void;

JIT Compiler

PHP Opcache supports JIT. It's disabled by default, and if enabled, JIT compiles and caches native instructions. It does not make a noticeable difference in IO-bound web applications but provides a performance boost for CPU-heavy applications.

# Enabling JIT in php.ini
opcache.enable=1
opcache.jit_buffer_size=100M
opcache.jit=tracing

Read part 2 of the blog here.

Jan 21 2021
Jan 21

Mobile app development is not rocket science in today's day and age. Making a good mobile application, however, is a process that requires a very lengthy pre-planning process. It could be as simple as launching the IDE, putting a few items together, doing a quick round of screening, and uploading it to an App Store, all achieved in half a day's work, to create your mobile application. Or you can render it a deeply engaged process involving comprehensive up-front design, QA testing on a range of platforms, accessibility testing, a complete beta lifecycle, and then various forms of deploying it. Your vision is given form by the direction you chose. With that said, here is a look at the lifecycle of app creation and the priorities and obstacles along the way.

1. The Research

Even if yours is only for getting a mobile app presence, every app development starts with an idea. Refine the concept into an application on a solid basis. Make sure that your initial research covers your buyer persona's real demographics, motivations, activity trends and objectives. Keep the end-user in mind during each point of the process. Now, try to think of the lifecycle of your client, until their features are pinned. They need to be obtained, transformed, maintained and their loyalty nurtured after you meet them. In the end, you can understand how the digital product would be used by the client. Doing this will put you on a solid footing at the very beginning, and your transparency will give you and your investors much-needed confidence.

This phase is critical because you lay down the required groundwork during this phase for what is to come next. Before heading on to the next step, do your bit of intensive studies and strategizing. And evaluating competition is another essential part of this point. A thorough review of the software of your rival can assist you to find out what features are lacking in your software so that you can incorporate it into your app to make it pop out.

2. Wireframing

The next step is for the app to be registered and wireframed. While time is not on your side at this stage, it allows you to uncover usability problems by actually drawing thorough sketches of the envisaged product. Sketching does a great deal more than just tracing the moves. It can be a strong instrument for cooperation and interaction. Wireframing will help refine the concepts when you're finished sketching and organise all elements of the design correctly. In this initial step, you can resolve any technological limitations found in the context of back-end development. Now, try to build a better picture of how a working app can fuse the suggested designs and ideas. To show the relationship across each screen as well as how the users can move through the app, you can also establish a roadmap or a template. Look for ways to integrate the brand, concentrate on the user experience and take into account the variations in how people use a mobile phone app and a mobile browser.

3. Technical Feasibility Assessment

Now though, you may well have a good understanding of the graphics, but you must still take into account if the back-end frameworks would be able to maintain the interface of the app. You need to gain access to public data by accessing open APIs to know if the concept of your application is technologically possible. There will be various specifications for an app, based on its size (smartphone, tablet, wearables, etc.) as well as the system (iOS, Android, etc.). The team will have fresh concepts for the app by the conclusion of this phase or have concluded that some of the preliminary functionality is not feasible. Brainstorm a little at this stage, ask questions, and check the status.

4. Prototype

Build a simple prototype. The keyword here is Rapid. Before and until you contact the Software and see how it functions and flows, you can't fully grasp the touch experience. But, to see if it works with the most popular use case, create a prototype that brings the app idea into the hands of a user as soon as possible. For this step, use rough and not detailed wireframes. If you are bringing stuff in the right direction, this will help you see. Include in this phase the stakeholders, enabling them to access the prototype will offer you their input and apply it in your work. And, also, the prototype will provide the first look at your app to various stakeholders and will help you verify the data you have collected.

5. Design

You can plunge into programming once you get this phase-out of the way. The connection between design elements is architected by your user experience ( UX) designer, while the user interface (UI) designer creates the app's look and feel. With its various review steps, this is a multi-step process. Blueprints and visual direction are what you get, reminding the engineers of the final product envisaged and how interaction can shift, feel and flow. This design process can be done in a single afternoon or can take a team a whole lot of hours, depending on the project scope and app budget. And by playing around with the layout of control, buttons and other graphic cues, remember to make several variations of a computer. The more your product differs, the greater the chances that your UX will be original. Designing applications can prove to be a multi-step process, and the results should be simple visual instructions that provide the final product with an abstraction.

6. Develop

Generally, the production process begins very early on. In reality, a working prototype is created after an idea gets some maturation in the conceptual stage, validating functionality, assumptions, and helping to provide an understanding of the scope of work.

The app goes through a series of phases as the production progresses. The core functionality, while present, is not verified in the initial stage. Seeing that the app is very buggy, there is no non-core functionality at this stage. In the second level, most of the proposed functionality is implemented. Ideally, the software has gone through light testing and bug fixing, but there may still be some problems. In this step, for further testing, the app is released to a certain group of external users. The app will pass to the deployment stage after the bugs in the second stage are patched, where it is ready for release.

Make note of the agile approach if yours is a complicated task where user requirements change frequently. Flexible preparation, progressive growth, early implementation and continuous changes are supported by this. A large framework can be split apart into smaller components, and each of these minor bits can be added to agile methodology.

7. Testing

It's a good way to check early and often in mobile app growth. Doing so will keep your final expenses down. The deeper you go through the growth cycle, the more expensive it becomes to patch bugs. When building the different test cases, relate to the original design and development documents.

Application testing is comprehensive, so ensure all the relevant aspects of it are covered by your team. Usability, functionality, protection, interface tests, stress, and performance should be checked for the application. You explore whether or not your mobile app works with your intended users during user acceptance testing. To test this, provide a few individuals in your target audience with your app and ask specific questions. You know your approach "works" after your application passes the user approval test, and further make your application available for a beta trial, either by the registration of previously established groups or an open request for participants. The reviews you get from beta users will assist you to find out if the features of the app perform well in a real-world situation.

8. Deployment

Your app is ready for submission. Select a day and initiate a formal launch. The rules for the release of an app are appropriate for various application stores. And note, this is not the end. Creation of apps doesn't stop at launch. Input will flood in when the application gets into the hands of consumers, and you will need to integrate the input into future iterations of the software. Updates and new features will be required for any app. Usually, the development cycle starts again as long as the first version of the software is released. To sustain your item, make sure you get the resources. Bear in mind that it is a long-term investment, aside from the money spent in creating a digital product.

The key thing to note is that a constant and continuing phase is the creation of apps. It just doesn't end with the release of the final production, it's just the beginning. More reviews and suggestions will come in as the app gets more users, and you will have to incorporate the requisite improvements in the form of potential app updates. Follow the above steps to make your app hit the pinnacle of success if this is your debut attempt at app growth. The mobile app development process is very intricate. Mobile app development companies and agencies are in great demand because the customer base for it is large. The back end of your mobile app is made by app developers using specialised mobile app development software and tools. Developing the apps we love and spend our days’ scourging is being created with a lot of care by mobile app development companies. Mobile app development companies in India have greatly evolved and are at par with others on a global scale.

Jan 21 2021
Jan 21

It's essential that companies have a presence online in the digitalised global economy. Enterprise web development is thus, naturally, an important opportunity for a company to achieve online exposure and enter a broader audience. Web creation for business is essentially the method of creating a company-level website.
Enterprises run the gamut from mid-sized to large-scale enterprises and institutions (governmental, for-profit or non-profit) to organizations and collectives (healthcare, education, philanthropy, or any other group with a common purpose or similar goals).


Developing a company website requires a huge joint project with a web development firm, as the design of an organization website is extremely complicated. In this blog, we'll address what web commerce is, what it does and, most significantly, what it can do for your company.


Significance of Enterprise Web Development

Web creation provides a global platform essential for communicating the business model of a company to specific customers. Business websites are an excellent channel for the promotion of products, services and even ideas.

In addition, with a growing amount of business being done online, it is safe to assume that in the coming years a company without a high-quality website will find it extremely difficult to maintain itself.

A website is the initial point of interaction with prospective clients in the modern age, and having a beautifully crafted website can help to improve the brand and increasing customer retention. mid-to client website goes beyond advertising and helps companies to conduct a significant portion of online operations effortlessly.

They vary from receiving and executing requests to supplying consultancy services and responding to inquiries, to offering information via blog posts or video clips.

Because of advancements in web technology and increasing value of enterprise web development, websites and web applications are predicted to become more creative and offer companies and customers several more advantages.

Read more to understand how web development for enterprises will increase your business opportunities.

How Does an Enterprise Website differ?

Since the best enterprise website designs are usually designed for mid-to large-scale enterprises, it demands several more features and resources to address different needs than a standard website. This also varies in the kind of content management system employed.

The Enterprise Content Management (ECM) program used by business websites requires many tools, modules and functions that satisfy the plethora of detailed criteria of different stakeholders (customers, investors, partners, suppliers, and others).

An enterprise website also includes resources and approaches for branding, content creation and marketing approaches such as SEO and keyword rankings, inventory management, code incorporation and much more.

While the structure and efficiency of enterprise websites rely on the purview of a business, business websites are generally needed to accommodate increasing traffic, rapid surges in demand and need to be flexible to expanding operations in the long - term.

Scalability is also an essential factor as a website should be able to accommodate potential development without impacting the pace of the site and the user experience. Overall, a company website is considerably more sophisticated and comprehensive to meet the capability and a wide range of features needed for a business.

Therefore, enterprise website management is significantly unique and requires careful preparation. Enterprise web development involves resources which involve, but are not restricted to, UI and UX design technique, database building, content management system, website maintenance, customisation, brand assessment, and analytics configuration.

Bearing in mind the diverse problems and requirements of an enterprise website, it is important to cautiously choose a web development agency that can handle these nuances. In reality, it is strongly advised that you look for an agency that can modify the website of your organization after having considered its priorities, scale, long-term goals, vision, mission and value proposition for the business.

Some of the best enterprise web development tools are;

Angular.JS

Chrome DevTools

Sass

Grunt

CodePen

TypeScript

GitHub

NPM

JQuery

Bootstrap

Visual Studio Code

Sublime Text

Sketch

1) Angular.JS

AngularJS can help you expand your vocabulary to HTML. HTML is fine for static documents but dynamic displays won't work. AngularJS can provide you with an environment that can be descriptive, readable, and rapid to create. It provides the toolset that will help you to construct the framework for developing your application.

This entirely extendable toolset is capable of interacting with other libraries. It offers the ability to modify or remove the features according to your production workflow.

2) Chrome DevTools

Chrome gives Web developers a selection of tools. Such tools are built into Google Chrome. This has the features of displaying and modifying the DOM and layout of a Tab. With Chrome DevTools, you can display notifications, run & debug JavaScript in the browser, edit on-the-fly pages, easily diagnose the problem and improve the pace of the website.

3) Sass

Sass is the most sophisticated and functional CSS-extension language. It will allow the use of variables, nested rules, mixing and functions. Sass will enable you to share the concept around and inside projects.

4) Grunt

Grunt is a JavaScript function runner, perfect for automation purposes. It will perform most of the routine work including mining, compiling, checking units, etc...

5) CodePen

CodePen is an online platform with the features and functions for front end design and distribution. You can use CodePen to build the whole project as it contains all of the IDE features in your browser.

6) TypeScript

The language of open-source coding is a typed JavaScript superset. For plain JavaScript, it will generate the code. It supports every client, host, and operating system. You can use the current JavaScript code and call JavaScript to the TypeScript code.

7) GitHub

GitHub is a Website for Software Development. It will assist in running the programs. GitHub will allow you to build a review system and incorporate it into the workflow for your application. This can be integrated into the software that you already use. It can be deployed as a self-hosting or cloud-hosting solution.

8) NPM

Using critical JavaScript software, Npm can help you create stunning stuff. This has Group Leadership functionalities. No configuration will be needed. It offers auditing security mechanisms.

It offers security expertise, de-duplicated growth, intrusion detection and unrivalled assistance for enterprise-grade solutions.

9) JQuery

This JavaScript library is designed to allow traversal and manipulation of HTML DOM tree simplified. This also allows for handling and animation of events. It is loaded with features.

10) Bootstrap

Bootstrap is the toolkit that allows you to create with HTML, CSS, and Javascript. Bootstrap is used to build mobile-first sensitive projects over the internet. This library of front end components is an open-source toolkit.

11) Visual Studio Code

 Visual Studio Code can run anywhere. It has IntelliSense technology, Debugging, Built-in Git, and plugins to include languages, templates, debuggers, and more. It supports systems running Windows, Mac and Linux.

12) Sublime Text

Sublime Text is a scripting language that is suitable for javascript, markup, and prose. It supports divided editing mode. You'll be able to modify files side by side with the aid of this feature. This may be accessing the same file at two different places.

This offers even more features such as customizing something and fast project move. Sublime Text allows Platforms for Windows, Mac and Linux to run.

13) Sketch

Sketch offers a smart interface to help you build flexible, reusable components that can be resized to suit the entire content. It comes with hundreds of plugins. It supports Mac OS and can be used to build animations on timelines.

7 Website Features That Help Businesses Grow:

Well-designed configuration of the site

Navigating should be simple and encourage visitors to find what they are searching for at a cursory look.

Efficient development and engineering

A growing number of visits to the site use portable devices such as mobile phones or tablets to search online. A customized web design that adapts to the user experience by changing the layout accordingly, such as the screen size, interface and rotation.

A website that appears appealing, whether accessed from a mobile phone or desktop and easily loads to all platforms (because mobile devices usually have lower internet speeds than desktop computers), would appeal to all consumers.

What Can Business Do For You

Defines explicitly what the business model of the company is and how it will benefit you.

Lead Generation and Participation

Create marketing leads from clients, inquiry forms and methods, and techniques specific to your company.

Notifiable material

Publish material not only promoting the goods but also offering information that targeted customers are looking for.

Calls-to-Action

Including simple calls-to-action is a successful approach to enable clients to start a conversation. One of the best ways to increase the conversion level is to make it simple for customers to reach you or buy your product or service via direct calls-to-action.

Analysis and Tracking

This is important so that companies can evaluate data such as demographics, customer behaviour, purchasing habits, marketing and promotional campaign efficiency and other criteria.

Web-Based Enterprise Applications

Web-based corporate software, including client websites, are valuable business tools. A web-based business app is a program developed for mid-to large-scale organizations and that can be launched on the Web or intranet.

Apps are designed for various purposes, whether for internal or external uses. As an example, an organization may need a shared app of internal needs, such as communicating and exchanging project documents and information with staff located at various locations. Or a company can create an app for outside investors such as basic order placement and delivery program.

Or it may include an app for internal and external participants to collaborate on projects and participate in platform discussions from different places.

In addition, the software must communicate with existing systems, databases, and other technical entities for consistent access and smooth knowledge transfer. Since apps frequently contain and handle sensitive customer information, strict security procedures are also required to secure data, business information and operations.

Working with a skilled customized software company is the best way to develop web-based business apps.

Advantages of Web-Based Enterprise Apps

Flexibility

Staff members can access and send business details, wherever they are, making it much easier for employees who drive to or work from home to work with unlimited accessibility and even take care of the crucial business in order to guarantee accuracy and consistency.

Marketing

Far more corporations are trying to make the most out of their online network to advertise and sell their products and services, and also to manage online transactions and processes. Companies creating technology applications to achieve corporate website development goals gain competitive advantage.

Interoperability

The interface and integration of an app with other devices and resources promote consistency which in effect allows for high compatibility between different platforms, systems and devices.

Installation, deployment, and maintenance are fast and cost-effective

Web applications can be built in a single operating system, resulting in cost-efficiency. They're all located in a single server from where they're open to all users. They can also be managed and modified from a central site that is open to users universally over the network.

Data Security

Since web applications are built and stored on stable, dedicated servers managed by security specialists, all company and customer information is stored securely.

Demand for customized web apps is only anticipated to increase in the future as more organizations continue to realize the advantages of a custom-designed app designed to match their processes and goals.

Emerging Web Development Trends

With recent advancements in web technology and the increasing requirement for enterprise web creation, websites and applications are anticipated to become more innovative and nuanced in terms of its functions, usability and presentation.

Emerging trends in web growth, such as Accelerated Mobile Pages (AMP) and Progressive Web Application (PWA), would concentrate on delivering a more engaging user interface, great potential for SEO rankings, improved safety, higher load speeds and increased traffic. Such developments will certainly boost market opportunities by enhancing new acquisitions and operations of customers.

The web development field is set to expand in the years ahead and provide an increasingly attractive and exciting digital space.

Jan 21 2021
Jan 21

The dilemma of choosing the more suitable CMS from a range of possible CMS options can be overwhelming.' is a major question that comes to mind when thinking forward towards development.

Now, that alone relies on the requirements that you will come up with. For a blog-related website, WordPress might be one's choice. Similarly, for a website catering to e-commerce, Magento might be one's preference. The question arises why should Drupal be chosen over existing options. Why is Drupal the best CMS? Safety, 3rd party implementations, support networks, comprehensive, SEO friendly, open-source tools, support for Free Module / Plugin, etc. are the  contributing factors. If you have a query as to “Should I use Drupal?” These are some of the features that should help you make an informed decision.

Drupal Migration Services are also available and it is the simplest approach via which you can relocate your existing website to Drupal. The complexity of the database structure does not matter.

Some advantages that come with choosing Drupal are:

1. Community

The open-source structure of Drupal promotes consistent collaboration and development through the Drupal community's support and enthusiasm. Today, in 230 countries, there are over 1.4 million Drupal users who are committed to pushing Drupal towards success. The opportunity to generate extraordinary digital experiences extends far beyond what a single team of patented software developers could conceive of, with a pool of such varied experts working constantly to make Drupal better.

2. User Experience 

The new Drupal is a revolutionary digital platform that can be leveraged by developers and marketers to generate memorable customer experiences. The latest editions of Drupal have prioritized user experience (UX) to encourage everyone to strengthen existing customer experiences, from site editors to content creators. Some of Drupal's user interface improvements include:

Layout Builder - Provides an easy-to-use page building experience for content authors that allows editors to control the get-up of their content without relying on a developer.

The administrative theme of Claro provides a cleaner, easier-to-use site management, configuration, and authorship interface.

Mobile sensitive web features- out-of-the-box delivery of mobile-friendly themes, sensitive images, and mobile management.

3. Scalability

Drupal is an effective and future-ready CMS that gives companies the freedom to adapt to their needs. The versatile API architecture of Drupal facilitates the development of exponential content across a worldwide multi-site ecosystem. Drupal is optimized for many caching circuits that facilitate faster page loading, optimized bandwidth, and stronger web performance overall, even under high-pressure conditions. 

4. Security

Safety is the primary concern when it comes to creating digital experiences that people trust. Not conforming to digital security norms can both harm consumer relationships and cause companies to suffer heavy legal fees for heavily regulated and public-facing sectors such as government and healthcare. Security is taken more seriously by Drupal than any other CMS. That's why organizations such as Georgia State, Steward Health Care, and Fannie Mae depend on Drupal to safeguard their websites and hold their audiences' trust.

5. Accessibility

An inclusive web environment for all users is prioritized by Drupal's determination to accessibility standards. For any specific component and function added to the core, availability is a gateway requirement.

Drupal guarantees that all of its features and functionality comply with the out-of-the-box WCAG, WAI-ARIA, and ADA standards of the World Wide Web Consortium. Some of the characteristics of usability included in Drupal 8 and the Drupal 9 entail:

Color Contrast Themes and text size optimization 

Defaults of Alt Tag

Control Tab Order  

Mobile Responsivity

Aural Alerts For sectors, such as tertiary education, with the responsibility of providing learners from a variety of backgrounds with opportunities and knowledge, accessibility is a major issue. At present, over 70% of educational institutions including renowned institutions such as North Dakota State University, have opted for Drupal as their CMS of choice. Drupal stays true to providing everyone, regardless of their circumstances, accessible information, and positive digital experiences.

Some of the widely asked questions when it comes to Drupal is, Why is Drupal better than WordPress? What are the benefits of Drupal over WordPress? Which is the best, Drupal or WordPress? So, let's take a deep plunge and compare them one by one according to scenarios.

Drupal vs WordPress

There is no denying about the intricacy of Drupal in contrast to WordPress, but no one can refuse that Drupal offers advanced features. The interface of Drupal is much wider than that of WordPress and it mainly uses types of content, views, categorizations, etc. So, if the requirement in that situation is for multiple templates, Drupal is rated higher than WordPress.

Flexibility

Drupal is more versatile than WordPress as it is engineered by developers for custom software development.

Everything is freely accessible as modules in terms of capability and you can customize everything in Drupal with the assistance of a developer. In WordPress, plugins are obtainable in paid versions. WordPress is intended to be a blogging platform. So, to manage a large amount of content and consumers, it has limited functionality and is Drupal's backbone for handling thousands of data and customers at the same time.

Security

Security is the primary concern for every customer who invests in building a website, and if their website is hacked, then everyone involved in the project will suffer a major loss. Drupal has enterprise-level security due to the large open-source community, which offers comprehensive security reports. The website of Whitehouse.gov or U.S. Govt is on Drupal, which demonstrates the trust in Drupal at the level of security.

In conclusion, you must first recognize the requirements of the customer and analyze them to choose which best fits your requirements. With the service component of Drupal 9 out now, developers have a complete object oriented structure for building websites, portals, e-commerce solutions, etc. Also, the answer to the question, “Is Drupal hard to use?” is NO. It is made for the ease of users and allowing yourself to be immersed in the experience is the surest way to make the best use of it.

Jan 05 2021
Jan 05

The following is a step by step instruction for implementing reading minutes left for a particular article, blog, or similar, just like we see on medium.com.

The JS file

  • I have used this JS library.
  • Place this code in a JS file named read-remaining-minutes.js and place it in the corresponding theme.
(function($) {
  $.fn.readingTimeLeft = function (options) {

    var s = $.extend({}, {
      stepSelector: '*',
      wordPerMinute: 100,
      eventName: 'timechange'
    }, options);

    var $this   = $(this)
    , $window = $(window)
    , $steps  = $this.find(s.stepSelector);

  // For each step element, store the quantity of words to come
  $steps.each(function (i, el) {
    var textAhead =  $steps.slice(i, $steps.length).text();
    $(el).data('words-left', textAhead.trim().split(/\s+/g).length);
  });

  // Filters elements that are in viewport
  $.fn.filterVisible = function () {
    var wW = $window.width(), wH = $window.height();
    return this.filter(function(i, e){
      var rect = e.getBoundingClientRect();
      return rect.top >= 0 && rect.right <= wW &&
      rect.bottom <= wH && rect.left >= 0;
    });
  }

  function throttle (fn, limit) {
    var wait = false;
    return function () {
      if (wait) return;
      fn.call(); wait = true;
      setTimeout(function () { wait = false; }, limit);
    }
  };

  var triggerOn = 'scroll.' + s.eventName + ' resize.' + s.eventName;

  // Throttle updating to 50ms
  $(window).on(triggerOn, throttle(function (e) {
    var wordsLeft = $steps.filterVisible().last().data('words-left');
    $this.trigger(s.eventName, wordsLeft / s.wordPerMinute);
  }, 50));

  // Destroy function
  $this.on('destroy.readingTimeLeft', function (e) {
    $(window).off(triggerOn);
    $steps.removeData('words-left');
  });
  return $this;

};
}(jQuery))
  • Next in the template.php file for your corresponding theme, you need to add the above JS file for the particular content type. You can do something like this below:
if ($vars['node']->type == 'article'') {
        drupal_add_js(drupal_get_path('theme','my_theme') . '/js/read-remaining-minutes.js');
}
  • After you have told Drupal to add the JS file, through the above code, your JS code will be ready for the page.
  • Now you need to specify where you want to add this functionality.
  • For that, I have a custom JS named “my-custom-js-code.js” file, in this same theme itself, where I usually write all my custom JS. Here I will specify my custom JS code.
// Reading time left for a blog post
    // #calculable-content is the id of the content on which we want to apply the calculation for reading time
    $('#calculatable-content').readingTimeLeft()
      .on('timechange', function(e, minutesLeft) {
        if(isNaN(minutesLeft)) {
          // .time-left is the class belonging to the read remaining div
          $('.time-left').hide();
        }
        else {
          // If less than 1 min remains then display "Content Finished" else show the minutes left
          var text = Math.round(minutesLeft) < 1? $('.time-left').text('Content Finished') : $('.time-left').text(Math.round(minutesLeft) + ' min left');
          $('.time-left').show();
        }
      })
    $(window).trigger('scroll');
  • Here I am considering that when the scroll reaches the end, it will show “Content Finished”. I will explain the id and the class used below.

Modifying .tpl.php

  • We have placed our JS codes as needed. Now we need to link it to the class in HTML so that it appears on the page.
  • I have a .tpl.php file which is responsible for rendering all the HTML content for the particular page named “custom-template.tpl.php”
  • In this .tpl.php file, at the place where you want this read remaining minutes block of text to appear,  you have to specify the HTML for it.
 
  • The time-left class is the wrapper class for the block, that is the entire block of the text itself.
  • The id calculatable-content is what we are using to calculate the time left, which will dynamically change while you scroll through the page.

Implementing CSS

  • We need to add a decent enough css so that it appears on the page without hurting the eyes!
  • You can use the following css, using this will place the block of text at the right top section of the page.
.time-left {
  position: fixed;
  right: 0;
  top: 176px;
  padding: 10px 10px 10px 40px;
  background: #068bb8;
  color: #fff;
  font-size: 15px;
  line-height: 19px;
  cursor: default;
  border-bottom: 0px;
  z-index: 999;
  &:before {
    content: url('../../../../../sites/all/themes/my_theme/images/time-left-white.png');
    position: absolute;
    top: 12px;
    left: 15px;
    @media screen and (max-width: 767px) {
      top: 8px;
      left: 10px;
    }
  }
  @media screen and (max-width: 767px) {
    padding: 6px 6px 6px 35px;
    font-size: 12px;
  }
}

Final approach

Now you just need to hit the cache clear, sit back and enjoy. Observe how the time changes as you scroll through the page!

Jan 05 2021
Jan 05

You might want to add the functionality for a magnific popup where there are multiple items, say images, videos which on clicking would open up in a popup and you would be able to scroll through those. Something like this: https://dimsemenov.com/plugins/magnific-popup/.

Worry not! You do not need to go through the entire documentation in the above link. I have done the hard work for you so that you can get it done in the wink of an eye!

Initialization and modification in custom JS

  • First you need to include the JS library in your theme.
  • The minified file is quite big, so I am not providing it here.
  • You can find the minified JS file here: https://github.com/dimsemenov/Magnific-Popup/blob/master/dist/jquery.magnific-popup.min.js.
  • Place this JS file in the theme you wish to use.
  • Next in the template.php file for your corresponding theme, you need to add the above JS file for the particular content type. You can do something like this below:
if ($vars['node']->type == 'article'') {
        drupal_add_js(drupal_get_path('theme','my_theme') . '/js/jquery.magnific-popup.min.js');
}
  • Once done, you need to write the custom js, where you want this magnific popup to be triggered.
  • The custom JS should look something similar to this:
// Gallery section magnific popup
      if($('.gallery-section .tab-content').length) {
        // magnificPopup for tab 1
        if($('.gallery-section .tab-content .tab1).length) {
          $('.gallery-section .tab1).magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
              enabled: true
            }
          });
        }
}

Somethings to note:

  • I had a tabbed gallery section. Each of the tabs contained a video as the first element and then the rest were images.
  • Here first I check if the gallery section exists. If so, then I again check if the particular gallery tab exists. If so, then for that particular gallery tab I implement the magnific popup.
  • Where “delegate: a” means that I am imposing the functionality on the “a” tag.
  • I have specified the type as an image. You might have the question then how would it work for the video right? I will definitely tell you that in the later section.
  • Finally, we initialize the gallery as true, for it to work.

Implement the custom Html

  • Implement the custom HTML as you like, a gallery tabbed section in my case.
  • Let us see an example of the html I have used:


tab video



  • Now comes the fun part! All of the above are images, except for the first one which is a video. For that to work properly, you simply need to add the following class “mfp-iframe” in the class for the respective video “a” tag.
  • Here I have 1 video and 4 images. That is a total of 5 elements. So when you cycle through these, below you will be able to see that the total count is shown as 5.
  • For sections where you may have multiple tabs, you need to repeat the js
$('.gallery-section .tab1).magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
              enabled: true
            }
          });

For each of the tabs with their corresponding ids respectively. Else it will take the total count of all the elements “for that particular section” and “not that particular tab” and cycle through, say, 100 elements (the total number of elements that you may have in the entire section) instead of the 5 elements in that particular tab.

I am not providing the CSS as that is subjective to how your section looks. Enjoy!

Dec 30 2020
Dec 30

Oftentimes it may happen that you have a Github account where you upload all your code for practice sessions or learning purposes. You have another Github account pertaining to your company profile. When you push your changes, be it to your own Github account or a project-specific, how do you make sure that the respective account is always used? Well, I am here to help!

 

Set up SSH Keys

Let’s assume your two Github accounts are named githubPersonal and githubWork, respectively.

Create two SSH keys, saving each to a separate file:

mgh 1 img

Save it as id_rsa_personal when prompted.

mgh 2 img

Save it as id_rsa_work when prompted.

The above commands set up the following files:

- id_rsa_personal

- id_rsa_personal.pub

- id_rsa_work

- id_rsa_work.pub

Add the keys to your Github accounts

Copy the key to your clipboard:

mgh 3 img

In case you do not have pbcopy installed. To install and use pbcopy:

mgh 4 img

Edit your bash file

mgh 5 img

Create alias

mgh 6 img

Refresh your bash

mgh 7 img

Add the key to your account:

  • Go to your Account Settings.
  • Click “SSH Keys” then “Add SSH key”.
  • Paste your key into the “Key” field and add a relevant title.
  • Click “Add key” then enter your Github password to confirm.

Repeat the process for your githubWork account.

Create a configuration file to manage the separate keys

Create a config file in ~/.ssh/

mgh 8 img

Edit the file using the text editor of your choice, here I am using nano, which is readily available in Linux.

mgh 9 img

Paste the following in the config file:

mgh 10 img

Update stored identities

Clear currently stored identities:

mgh 11 img

It will show all identities removed

Add new keys:

mgh 12 img

Test to make sure new keys are stored:

mgh 13 img

Test to make sure Github recognizes the keys:

mgh 14 img

You should see something like this:

mgh 15 img

mgh 16 img

You should see something like this:

mgh 17 img

One active SSH key in the ssh-agent at a time

To keep things safe, we need to manually ensure that the ssh-agent has only the relevant key attached at the time of any Git operation. So that the active ssh key is used at the time of push

ssh-add -l will list all the SSH keys attached to the ssh-agent.

Clear currently stored identities:

ssh-add -D

Add the required ssh key

Change config name and email for a project

GitHub identifies the author of any commit from the email id attached with the commit description.

First, check the name the project is using:

mgh 18 img

Check the email the project is using:

mgh 19 img

If you need to change then do the following:

mgh 20 img

Dec 30 2020
Dec 30

With teams growing in size, it’s more important than ever to define a paradigm of deploying code to achieve a synonymous rule about the code and to keep contributors on the same page. This can be achieved with “Git Hooks”.

Git hooks are scripts which trigger specific automated actions based on an event performed in a git repository. The git hook name usually indicates the hook’s trigger (e.g. a pre-commit, a post-commit, etc). These hooks can be useful in automating tasks on your git workflow. For instance, based on defined rules, it can help us validate the code or run a specific set of tests before a code is committed. 

Setting the Git Hooks

Git hooks, thankfully, are a built-in feature. Which means we can access them and use them with our modifications as long as we have a git repository initialized. For better understanding, let us set up one.

Create a directory and cd into it:

gh 1 img

Initialize the repository with git and check the contents:

gh 2 img

On doing so, you would notice a hidden directory has just been created. This .git repo is used from git and is responsible for storing all the information related to the repository we created such as commit info, remote repository addresses, version control hashes, etc. Also, it is this folder where the hooks actually reside. If we cd into this folder we would be able to see certain scripts that are already present in the repository.

gh 3 img

One thing to notice here is that these hooks have an extension “.sample”. This means that they are not executable yet and not ready to be used as of this instance.

Let’s Cook inside the Hook!

Now that we know what a Git Hook is, let us take a look at how we can bring it to use, through an example. While we are inside the .git/hooks repository, we can see that there are many hooks present but not yet ready to be used. Let us use the pre-commit hook. But let us create one from scratch, instead of using the one that is provided.

Our objective here would be to validate the git config's global user email and the name respectively. Once all seems to be fine then it would show the user a message “Changes are ready to be committed” when a file is committed to git and another message showing “Changes have been committed” once the user commits the file to git.

Step 1

cd into the .git/hooks repository and create a new file called pre-commit.

gh 4

Step 2

The next step is to make the pre-commit file that we created, executable. Once inside the directory .git/hooks, make the file executable by typing in the command chmod +x pre-commit.

gh 5 img

Step 3

Now we need to create our script. In order for the script to run, we first need to specify our shell. Do this by using #!/bin/bash at the beginning of your script for bash or #!/bin/zsh if using the zsh shell like I am. Specifying an incorrect script would result in an exit code 0 and will be considered a fail.

This pre-commit hook will watch for incorrect commit authors using the script below.

gh 6 img

We will repeat the same steps for our post-commit hook.

  1. Create a post-commit hook.
  2. Make it executable.
  3. Insert your code in the post-commit hook.

If everything works fine then you should be able to see something like this below, when the correct credentials exist.

gh 7 img

In the above example, we have written our scripts in zsh but we can do the same with any other scripting language as well like Python, Javascript, Node.js, etc. The only thing to keep in mind is that we use the correct format at the first line of our executable script.

Dec 30 2020
Dec 30

Drupal behaviors is a more modular and customizable strategy to implement JQuery.ready. Ok, this statement does not completely explain it. Let us get deeper into this by asking the right questions. The what? The why? The when?

Before diving straight into Drupal behaviors let us first understand how does the existing JQuery.ready work. When the DOM (Document Object Model) is ready for manipulation JQuery.ready starts digging with a shovel and modifies the elements in that particular page. But there is a catch here. When JQuery.ready starts digging with a shovel it does so only once and cannot modify a new element, which might have appeared suddenly out of nowhere, underneath what it has already dug. Modifying the new element would mean starting to dig yet again from the very beginning. Hence, speaking in plain terms JQuery.ready can run only once when the DOM is loaded.

Enter Drupal.behaviors, which is like a machine that instead of digging every time from the very beginning, can dig from wherever required. Even if, a new element suddenly appears underneath the earth, it can dig into that particular area and modify it. In programming terminology, this means that Drupal.behaviors can be run multiple times during page execution. Moreover, they can be run whenever a new element gets introduced into the document (i.e. during AJAX content loading). So, the advantage of Drupal behaviors over the document.ready() is that they are automatically re-applied to any content which is loaded through AJAX.

Drupal 7 provides us with two handles:

  1. attach: which is used to add an element to a page.
  2. detach: which is used to remove an element from a page.

Drupal.behaviors can also override or even extend an existing behavior. Supposedly, if a module has a behavior where hovering on an image adds a transition effect, another module could replace that behavior with a different transition effect.

Another advantage of Drupal.behaviors is that we can pass drupal_add_js (PHP) as the first parameter for being the context or Drupal.settings.modulename (JS) as the second parameter to the behavior.

When we pass the context variable as the second parameter to the JQuery selector only that context is searched for and not the entire document. This is considered as a good practice.

How to use Drupal behaviors?

This is what we would normally do:

db 1 img

Or, we can also write it as:

db 2 img

The above is a valid code and we can actually use it but, there’s a catch!

The above code will run only once but what if our content gets loaded through AJAX and we wanted to add a class to all span tags? Then we would have to do something like this:

db 3 img

The above code will work for the content that’s loaded initially but won’t get added to the new elements that get added on AJAX call. This is where we would have to use Drupal behaviors. Behaviors will get executed on every request including those that are AJAX. Hence, the above code can be written like this:

db 4 img

Now, let’s see what the different aspects of the code are:

ElementNew: This is the namespace. It should be unique. It can be the module name but that is not mandatory. This is what identifies the Drupal behavior as a unique one.

attach: This contains the actual function that should be executed

context: When the page gets loaded for the first time, the context will contain the entire document but after an AJAX request it will hold all the new loaded elements. Span, in this case. With this, we can address the required element itself on AJAX requests without having to consider the entire document which gets loaded initially.


settings: This contains information passed on to Javascript via PHP, it is similar to accessing it via Drupal.settings.

How to use settings in Drupal behaviors

Supposedly, for some reason we want to hide all the span tags that contain a class called ‘img-span’ from our page with a delay of 10 sec

db 6 img

Through the above code, the span with class ‘img-span’ will disappear after 10 seconds,  as we hard coded the duration (10000 ms = 10 sec). Now let’s see how to pass this duration using settings.

Now if we want the duration to be passed to javascript which later can be used to hide the class under different circumstances, we can use Drupal.settings.

Using drupal_add_js we can pass duration as settings.

db 7 img

The below code demonstrates how to use settings in javascript:

db 8 img

Nov 01 2019
Nov 01

If someone were to break in your room, they would probably learn less about you than if they hacked you on the internet. Our efforts towards security have to be as intensive online, as they are offline.  
An extremely popular Content Management System, Drupal is on top of the list for many. 
Very importantly, Drupal has a dedicated team to make sure that the Drupal core is largely free of loopholes or vulnerabilities that may compromise website security. 

Drupal powers more than 7,00,000 sites across the internet, which increases the chance of a specific site owner being vulnerable to cyber attacks. 
Although all third-party modules are heavily vetted, a little extra security is always a good idea.


Let’s find out how to enhance Drupal’s security and make it risk-free! 

Keep up with internet trends, update!

Image

Drupal’s team works consistently to offer timely and effective updates to enhance your security. Understand what the new updates fix and bring to the table, even though we’ve been conditioned for decades to overlook such information. With all the other things you need to remain updated with, this one is right up there with Instagram trends! 

Spam prevention modules

Spam

We know how our lives have become easier with Truecaller preventing our spam calls. Our websites give a sigh of relief using different anti-spam modules like BOTCHA or Honeypot. 

Even though they all play a different role, they are key to a spam-free website. They deploy simple but effective means to keep a check on bots, for instance. 
Get your line of knights ready to go!

Password policies

Password

Next time a website makes you enter a password with too many conditions, you should know you’re in safe hands. 
Drupal offers a range of password policies that you should opt for and users shall adhere too. For instance, automated log-out, in case it remains idle for some time, a minimum character length for passwords and other security measures.
 

Set your permission boundaries right.

Auth

Let’s do the obvious, and not give hackers permission, shall we?

You can limit your sensitive files and their access to only, read, write or modify them. This defines how compromising your website can be for potential hackers. 
Make your important files such as authorize.php only permissible to the author and developer. Confidential configuration should not be present in the version control system and must be configured directly and secured on the particular instance that it has to be used for.
 

Implement HTTP Security Headers

This one is easy, effective and shouldn’t be missed out on from the security checklist! Easy to configure, they let the browser know how to handle your site’s content and bring your risk factor down several notches. 

Lock

Pro Tips:

  • Clear the carts! Always disable, uninstall and remove unused modules to keep it healthy and low-risk!
  • Take regular back-ups of all of your code, database, and files to prevent any loss of crucial data in case of a cyber-attack or a different threat to your website. 
  • Remember to keep an eye on your roles and permissions and modify them as and when you require to optimize your security.
  • Make sure you get an SSL certificate with a good rating. 
  • Reporting violations like CSP violation and Expect-CT failures
  • Trusted host settings need to be configured properly https://www.drupal.org/docs/8/modules/skilling/installation/trusted-host...

All set to keep out the dementors then? 

Jul 30 2019
Jul 30

We are well aware of the fact that Drupal Cache API is a remarkable feature introduced in Drupal 8. Still, this topic remains unrevealed to many developers as they consider caching to be a critical aspect of a website. In one of our earlier posts, we have exemplified Cache tags https://www.innoraft.com/blogs/how-does-entity-cache-work-drupal-8. Here is a guide that helps you easily grab in some basic concepts of Cache Context. 

Cache Context is basically a service that helps in creating multiple cached versions of something depending upon the context/request; be it a view, block or any other section on the page. 

For instance, let us consider a block displaying a list of tutorial links on a D8 instance. Now authorised users will be given access to all the links while anonymous ones will be provided only with the free tutorials. This data completely depends upon the role of the user. Hence ‘user.roles’ can be used as a cache context in such a scenario. For simplicity let us assume that there exist only two roles authenticated and anonymous. When an authenticated user hits the page, the version of the block with access to all links will be displayed. Hereafter if another authenticated user visits the page; the cached version of the block will be served thereby enhancing the site performance. When an anonymous user comes to the same page the entire request is carried out and the display with limited access to links will be shown. In such a way we can explicitly decide as to when the cache of the element will be invalidated based on the context.

D8 core provides few predefined cache contexts that are available at https://www.drupal.org/docs/8/api/cache-api/cache-contexts .

Our main focus here would be how to define and use a custom cache_context according to our requirement.

Let us consider a simple example to invalidate the cache of a block that displays a personalised message based on the summary that the user has provided in the user edit page.

Prerequisite: Add a field for filling in summary in the user edit form([base_url]/user/[user_id]/edit) provided by default in drupal.

Cache context can be registered as any other service in the module.services.yml file:

services:
  cache_context.user_summary:
    class: Drupal\example_cache_context\CacheContext\UserSummaryCacheContext
    arguments: ['@current_user']
    tags:
      - { name: cache_context }

   example_cache_context.services.yml

The trick here is to understand the naming convention for a new cache context. The name of the service should be of the format cache_context.* i.e should start with ‘cache_context.’ followed by the appropriate name. Hence the name cache_context.user_summary. Similarly, we can define a further level of hierarchy as well. As per the above snippet, the code for cache context goes into src/CacheContext/UserSummaryCacheContext.php. The service takes in the current_user service as an argument. The detail on how to pass a service as an argument to another is available at https://www.drupal.org/docs/8/api/services-and-dependency-injection/structure-of-a-service-file. We need to tag this service to cache_context as well.

The summary field should be used to create this cache_context logic as per the following code snippet:


user_current = $user_current;
	}

  /**
  * {@inheritdoc}
  */
	public static function getLabel() {
		return t('User Summary cache context');
	}

  /**
  * {@inheritdoc}
  */
	public function getContext() {
    $id = $this->user_current->id();
    $user_details = User::load($id);
    $summary = $user_details->get('field_summary')->getValue()[0]['value'];
    return $summary;
	}

  /**
  * {@inheritdoc}
  */
  public function getCacheableMetadata() {
    return new CacheableMetadata();
  }
}


UserSummaryCacheContext.php

Here the SummaryCacheContext class implements the interface CacheContextInterface. The variable $user_current which is an instance of AccountProxyInterface is declared protected and used as per the arguments mentioned in the services.yml file. The function getContext() contains necessary code for the cache invalidation based on the context. We can implement any other logic according to our requirement here.

The CacheContext code is now ready to use. In order to test the code, create a block within src/Plugin/Blocks and place it on any page:


id();
		$user = User::load($UserId);
		$summary = $user->get('field_summary')->getValue()[0]['value'];
		$build['user_summary'] = [
			'#markup' => $summary
		]; 
		return $build;
	}

  /**
   * {@inheritdoc}
   */
  public function getCacheContexts() {
  	return Cache::mergeContexts(
  		parent::getCacheContexts(),
  		['user_summary']
  	);
  }
}

 UserSummary.php

To verify if the context has been added properly, use the chrome dev tools:

dev_tools

If these headers are not visible you might need to configure settings to enable these as per https://www.drupal.org/docs/8/api/responses/cacheableresponseinterface#debugging

This eliminates the need for cache clearance of entire site after the update of any data which slows down the website. Hope this blog gave a better insight as to the usage of cache context in Drupal 8. You can now invalidate cache as per the context keeping in mind the performance of the site while updating the user of every new piece of information appearing on the website. 

May 08 2019
May 08

Something that started as a small community within India, a decade ago, is something that developers now swear by. As the number of developers increases multi-fold, here’s a snippet of its very melodious roots!

[embedded content]

But what is all the buzz about? Drupal is an open source platform for building digital experiences. We already know of the many benefits and boons that open source comes with.

Here are a few reasons why you should prioritize security and make Drupal your first choice:

OWASP

Owasp

The Open Web Application Security Project, or OWASP, is an international non-profit organization dedicated to web application security. It runs on the core principle that everything should be accessible and available free of cost, making it easier for anyone to enhance their own web security.

Drupal meets all security standards set by OWASP, allowing you to have an open canvas while defining the security boundaries.

The Security Team:

Security

Drupal is home to 40 security experts from around the world who manage the CMS security. They ensure that any vulnerabilities in Drupal’s core platform are quickly rectified. The team also generates the documentation required in order to combat security-related glitches.

Community

Community

For any great open source software, there is always a well-knit community striving to make it better and flexible. When a massive amount of people work on something in synergy, it’s bound to be more reliable and secure. People who are part of a community are very motivated to give out high-quality outputs.

Also, as a result of a large community, any and all bugs get fixed within a few hours itself.

Encryption of Database

Database Encryption

Data can be encrypted using Drupal. The CMS configured can encrypt the database on all levels and parts of a website. This makes it easy to host content like user accounts and forms. Drupal passes all privacy standards through its encryption.

Trusted by large enterprises

Large Enterprise

The large enterprises (or the government itself) have sensitive and confidential data and can’t afford security breaches. Drupal is trusted by a lot of these organizations to host their content and information which is a matter of goodwill and reputation. In fact, several times, these organizations have released articles on why they think open source and Drupal has been extremely efficient for them.

All in all, there are various reasons why Drupal is reliable and secure. It allows both, public and private file system and is highly convenient. The frequent releases with upgraded paths cover the latest vulnerabilities. If you’re looking for a CMS, make Drupal your first choice and sleep soundly knowing your platform is secure!

Apr 26 2019
Apr 26

 

 

In the first part of this blog, we had completed the installation and had also created blocks for custom block types. In this part, we will see how to configure the TB mega menu so that we can get the structure of the menu ready as per our design.

 

Configuring the TB mega menu and placing the TB mega menu block in a region are two separate things.

 

The TB mega menu can be configured for an existing menu. So, you need to ensure that you have a complete hierarchy of menu ready before you begin the configuration. However, you can modify the links later on from the TB mega menu configuration page.

 

If you already have a menu that you want to use then you are already a step ahead! If not, then go to /admin/structure/menu and click on the Add menu. Create the menu as you normally would.

 

For demonstration purposes, we will be using the below menu structure. Let the name of this menu be Example menu:

 

Parent 1

    -Child (1)

        -Child (1) content

    -Child (2)

        -Child (2) content

        -Sub child (1)

            -Sub child (1) content (This content will be displayed over the child (2) content)

        -Sub child (2)

            -Sub child (2) content (This content will be displayed over the child (2) content)

    -Child (3)

    -Child (4)

Parent 2

    -Child (1)

    -Child (2)

        -Sub child (1)

            -Sub child (1) content (This content will be displayed over the child (2) content)

        -Sub child (2)

            -Sub child (2) content (This content will be displayed over the child (2) content)

    -Child (3)

Parent 3

    -Child (1)

    -Child (2)

    -Child (3)

Implementation

Now that we have a clear idea of how we want our menu to look like we can start implementing the TB mega menu.

 

Before we do so, one thing we had noticed earlier is that there were contents embedded in the menu itself for certain menu items. The contents include:

  1. Title

  2. Image

  3. Description

 

Some of the block contents had all of the above fields while some of the block contents may only have the title and description. Also, we need another content which would have neither of the above. We would come to this part later on.

 

Since we know what the hierarchy of the menu is and what content the menu items need to have let us create these contents first so that we have the block ready (more on this later) when we start configuring the menu.

 

The contents we have for the menu items are rendered via a block. These blocks will be later on placed while configuring the menu.

 

Flashback time

 

Let’s rewind time! Earlier we had created a block type with certain fields. These fields were left on the user to create as it is a pretty straight forward process. For this demonstration purpose let us create the following fields for our block type.

  1. To create fields for the block type, go to admin/structure/block-types and click on Add block type.  Specify the Label and a description. Once done, click on Save block type.

  2. Next, you will be taken to the block type listing page which is /admin/structure/block-types. On this page you will have the option to Manage fields. You can add, edit or delete the fields for the particular block type from here.

  3. Once you click on the Manage fields option, you will be redirected to a page wherein you will be able to add or modify the fields.

  4. Initially you will have the following fields present by default:

    1. Label: this field corresponds to the name of the block.

    2. Title: this field corresponds to the title of the block.

    3. View mode: this field corresponds to the view mode of the bean.

    4. Revision settings: this field corresponds to the revision of the block.

    Note: these fields are provided by the bean module itself.

  1. Add the following fields by specifying a label and selecting the type:

    1. Menu item image:

      1. Label: Menu item image

      2. Field type: Image

      3. Widget: Image

You can add an image style to this field by going to the Manage display tab. Over there, click on the gear icon to the extreme right of this image field.

d8_manage_display

Once you do so, further configuration options will open. You will see an option to provide an Image style. Click on it and select the image style you want. Additionally, you can link this image to the content or the file. To do so, click on the Link image to option and select the desired option from the dropdown menu. Once done, click on Update and save the block type.

 

d8_update_save

 

    1. Menu item description:

      1. Label: Menu item description

      2. Field type: Long text

      3. Widget: Text area (multiple rows)

        The below image shows where you can create a field.

 

       

d8_menu_item

 

  1. Once done, save it and you will have your block type ready with the fields.

  2. Now you are ready to create the content for the block.

 

Creating content for the blocks

  1. To create the content for a menu item, go to /block/add/menu-item-content-block

  2. Fill out the below fields:

    1. Label: This is a mandatory field. This field corresponds to the blocks name i.e. this is the name of the block.

    2. Menu item image: This is an optional field. If we want to have an image in the content then that needs to be inserted here. On clicking browse, the media browser opens from where we can select the image file from our local storage or that residing on the server itself.

    3. Title: This refers to the title of the content.

    4. View Mode: This is a mandatory field. This field provides the default view mode for the bean. It would have a default option selected. Leave it as it is. This does not need to be modified.

    5. Menu item description: This refers to the description of the content.

    6. After the necessary information has been filled up, save the block.

  3. Now, the content for a particular menu item has been created as a block. Similarly, we can create blocks for other menu items. There can be a case where a particular menu item does not have an image. It only has a title, description and a link. In such a case, while creating the contents in the block as we did above, leave out the Menu item image blank i.e. without uploading anything in it. For another case, we would also require a common empty block, which would have nothing other than the block label. I will address this later on as where we exactly need it.

 

Now that we have the content ready we can start configuring the TB mega menu.

 

Configuring the TB mega menu

 

Initial configuration

  1. To configure the TB mega menu go to /admin/structure/tb-megamenu.

  2. Click on the config link for the menu that you want to be displayed.

  3. A page like the one below would open.

d8_initial_config

 

  1. This lists the 1st tier of menu items which we are referring to as the Parent menu item links with some options. The options include:

    1. Style: leave it as default.

    2. Animation: this might be selected as none. Change it to fading or some other animation style. This is because if no animation is selected then all the menu item contents would appear one above another and not only on hover, which is not what we want.

    3. Delay (ms): specify an animation delay as required.

    4. Duration (ms): specify an animation duration as required.

    5. Auto arrow: to hide the arrows next to items that have a submenu.

    6. Always show submenu: collapse submenus when browsing on small screens.

  2. This is all that we need to configure for the initial items visible when this page loads for the 1st tier (Parent) menu items.

  3. Now, let us move inside these links.

Creating child menu links

  1. Each of the child menu links is wrapped in containers. Let us name them for ease of use:

    1. Let us call the box that contains all the elements as the Container.

    2. Let us call the box that contains the elements directly as the Wrapper.

    3. Let us call the menu items as Elements.

  2. A visual representation will better support the explanation:

    1. Container.

             

d8_child_menu

 

  1. Wrapper.

 

d8_wrapper

 

  1. Element.

 

d8_element

 

  1. If there is a need to modify a certain menu link then that can be done by clicking on the Edit Links option on the right-hand corner of the page. This will redirect you to the menu link configuration page. Let us see below where it is

 

d8_edit_links

 

Add content to child (1)

  1. Click on Parent 1.

  2. Click on the first Element which is the child (1).

d8_parent1

 

  1. You will be able to see the option of Sub menu above. The value will be set as No. Toggle this option to Yes and a submenu for the child (1) will appear.

 

d8_child(1)

 

  1. Note: This submenu does not correspond to menu item links i.e. this is not for displaying a child menu link or any menu link to be precise. This submenu is for placing the content as a block. Menu items which have child menus will automatically appear under the respective menu items as they have been configured in /admin/structure/menu or by going into Edit Links as discussed above.

  2. We had earlier created a content for this which we would be placed as a block here. To do so, now you have to click on the submenu Element.

  3. Then click on the option which says Blocks: Select Block.

 

d8_blocks

 

  1. On doing so a drop down will appear with all the blocks.

 

d8_drop_down

 

  1. Select the block which has the content for this child menu item.

  2. In doing so the content will appear and look something like this:

 

d8_content_appear

 

  1. Do not worry if the design seems to break. This is just the configuration page and the design can be handled entirely through the CSS.

  2. Hence we have created content for a child menu.

Add content & submenu to the child (2)

Our design had a child (2) menu item which had two submenu links as well as content. This is a bit tricky. The functionality we sought was that:

  1. Hovering on the child (2) would display:

    1. The submenu links.

    2. The content for the child (2).

  2. Hovering on the submenu link for the child (2) would display:

    1. The content for the submenu links instead of the child (2) content, also for the second child menu link.

 

Let us see how we can achieve this.

  1. As per our menu structure, on clicking on the child (2) Element a sub menu link should appear.

  2. According to our design, the content should be placed just beside the submenu link for the child (2).

  3. To do so, select the Wrapper of the submenu link and an option will appear which says Add/remove Column.

  4. Click on the “+” sign for the Add/remove Column to add a column beside it.

  5. On doing so a column will be added beside the menu item link.

d8_column

 

  1. Now we need to add content to this block. So, like we had previously added, we can add content for the same by clicking on the Blocks option.

Note: the submenus may appear a bit too small. This could be easily fixed with custom CSS. For demonstration purposes, I had given a fixed width of 600 to the submenu Container.

  1. To do that, select the submenu Element of the child (2) and toggle the Sub menu to Yes

 

d8_sub_menu

 

  1. Once the block is added it will look something like this:

 

d8_block_added

Add no content for submenu of the child (2) of Parent 2

  1. Child (2) has two submenus:

    1. Submenu 1 (has its own content).

    2. Submenu 2 (does not have its own content).

  2. The tricky part is the second submenu not having content. In that case, the content of the child (2) will be shown when we hover on submenu 2. But this should not be the case as hovering on submenu 2 should show empty.

  3. To do this we need to place an empty block which we had created earlier

 

d8_empty_block

 

  1. Doing this would mean that when we hover on the submenu then no content will be shown and it would appear empty

 

Once done, click on the Save button to save the configuration.

 

The TB mega menu that we created should look something like this:

  1. With the menu looking like this:

d8_mega_menu

 

  1. The underlying menu links looking like this:

 

d8_underlying_menu
  1. The menu links with its submenu links and contents looking like this:

d8_menu_links

 

  1. The submenu links with its content look like this:

 

d8_S_links

The blocks might appear like the ones above but with CSS this can be easily fixed and the blocks can appear in one particular place.

 

This TB mega menu that we have configured is essentially a block. Once done, save it. Then go to /admin/structure/block, select the TB mega menu that you configured and place it in the desired region according to your theme region. Voila! You have your TB mega menu ready!

 

There are some points to take note of.

  1. Remember to turn on animation. It would be none initially. If an animation is not set then all the blocks that you place for the menu items will all appear at once, one on top of another.

  2. Remember to provide permission to the bean block else, it will not appear for the anonymous user. To do so:

    1. Go to /admin/people/permissions.

    2. Search for this term your_bean_block_name block (where your bean block name is the name of your block).

    3. Look for the your_bean_block_name block: View Bean.

    4. Tick mark the checkbox for anonymous user.

    5. Clear all cache and check the site for the anonymous user. You will have the block in the TB mega menu shown for the anonymous user.

 

You now have a completely configured TB mega menu on your site! You can add images, videos, texts quite easily now through blocks.


P.S: If you have missed out the 1st part of this blog, you can check it over here.

Apr 26 2019
Apr 26

The world as we know it did not always come with the TB mega menu for Drupal 7. Traditional menu implementations included writing the entire HTML and designing it as per the needs or using default drupal menu parallelly with other contrib modules to support different requirements This would often take days or even weeks to implement. Even after completion, the client may ask you to make changes and things may go haywire. Changing every HTML element is a daunting task! Another approach may be to use certain modules offered by Drupal to create a menu. The problem with this approach is that, though the menu might look simple, it would be a daunting task to make it completely configurable within a small time frame.

 

This is where TB mega menu comes in to save the world!

 

“TB Mega Menu allows you to create a mega menu with an innovative back-end user interface and synchronized with Drupal core menu.” - drupal.org

 

The TB mega menu gives the user an option for a completely configurable approach in terms of building a menu from scratch. Today we are going to discuss this implementation over Drupal 7. It allows the user to create a mega menu with images, text, video, using a block.

 

There is one dependency though that these things can be inserted via a block.

 

The installation and implementation are pretty straight forward but there are certain hairpins that can be the cause of a car crash if not carefully configured.

The problem

Recently, one of our clients had requested a menu which will have content like images, videos, links, text, etc. for each of the respective menu links, while being completely configurable at the same time. Now, this was a task which called up for challenges. It might appeal to one, to create the menu with bootstrap. The only problem with this being, it wouldn’t be so much of a configurable option for the user. Anytime there would be any changes needed to be made, the client would have had to come to us and wouldn’t be able to directly change it themselves. To have such a configurable option is a pretty daunting task!

 

This is where the TB mega menu module stepped into our help. The content we talked about earlier i.e. images, videos, texts, etc. essentially could be placed in the menu through blocks. Great isn’t it? Well not so much. You will see later on why.

 

As one dilemma seemed to hit the exit gate, another stepped in to fill its shoes. The basic block Drupal 7 offers give the user the option to enter details for the following fields only:

  1. Block title

  2. Block description

  3. Block body

 

And that’s essentially it. If you were to insert an image, video or a link then you would be stuck. One thing you could do is to create a block programmatically with the required fields but that’s one block. What if you needed every content you place in the mega menu for each of the respective links to be different?

 

This problem has been addressed in Drupal 8 with the concept of block types. Block types are essentially like content types wherein you can add fields of different type and later on add content for that particular block type respectively. You can have multiple block types with each block type having a different set of fields. These blocks can then be placed anywhere you like. But this is for Drupal 8. Fortunately, Drupal 7 presents a module which allows users to do the same. The module named bean now comes to the rescue!

 

“What is Bean?

Think of a Bean as a method to provide new types (compared to node this would be a content type) which then provides an add the content interface to create as many blocks as you require (see screenshot below). The bean content can then be placed around the site just like any other block.-drupal.org

 

Through this bean module, we can create a block type with the required fields and then have multiple blocks of that block type.

 

We now know what are the things required to kickstart the implementation we seek. So, let us now start the implementation.

Installation

  1. First, we need to install the TB mega menu.

  2. Then we need to install the bean module.

  3. Check if bean_admin_ui is enabled. If not then enable it. This will give us the UI to create the block type.

 

Before we start with the implementation of TB mega menu we need to have our content ready for the respective menu items.

Creating a block type

When the bean and bean_admin_ui modules are enabled, there will be an option to create block types understructure. To create a block type,

  1. Go to /admin/structure/block-types/add.

  2. Specify a name and description for the block and save it.

  3. Saving the block type will take you to the block type listing page (/admin/structure/block-types). Here you will be able to see all the block types that you have created.

  4. Now, that you have created a block type, you have to add fields to it. Similarly, like in content types, here, you have to click on the manage fields link in the block type listing page.

  5. From here you can create the fields you want. After doing so save the block type.

  6. Now, you have a block type created with fields in it. You can choose to add a block for this block type as we would do for content. We will be looking at it soon.

  7. Similarly, you can create as many block types as you want.

 

Adding a block for a block type

  1. Now, that you have a block type ready, you can add the content for it i.e. creating the blocks.

  2. To add a block go to block/add. Here you will be presented with a list of block types that you had created. From here you can choose to add a block for a respective block type. You can also go to /admin/content/blocks, which is the block listing page for the blocks created for custom block types, and click on Add block.  One thing to note here is that you would not be adding a block by going into /admin/structure/block/add because this is for adding the default block that Drupal 7 provides.

  3. Fill in the required fields and save. A block will be created.

 

You now have your content ready to be placed in the TB mega menu as a block.

 

Creating a menu

TB mega menu uses the menu that you already have on your system and lets you configure that accordingly. Creating a menu is a straightforward approach and you need to create the menu as you normally would by going into /admin/structure/menu and then click on the Add menu.

 

Configuring the TB megamenu

You have two essential things ready:

  1. The blocks (the contents that need to be placed in the menu).

  2. The menu itself.

 

Let us start configuring the TB mega menu!

 

  1. Go to /admin/structure/tb-megamenu.

  2. The TB mega menu is configured upon an existing menu (refer above). Select the menu that you want to configure by clicking on the respective menu’s config option.

  3. The menu links can also be modified from this configuration page. If you need to modify the links you can do so by clicking on the Edit links option.

  4. The config page shows 6 options initially:

    1. Style

    2. Animation

    3. Delay

    4. Duration

    5. Auto arrow

    6. Always show submenu

  5. The first level of menu items is shown initially. Let us, for example, take this as:

    1. Parent 1

    2. Parent 2

    3. Parent 3

  6. On clicking on Parent 1, we would have the option to

    1. Add a submenu

    2. Add an extra class

    3. Icon

    4. Item caption

  7. The child menu links will appear in the same order and relation as created in the menu /admin/structure/menu.

  8. This Parent 1 menu item will have it’s child menu links shown in a container.

  9. On clicking on this container, we will have the option to

    1. Add a row below this container

    2. Hide when collapse

    3. Specify a width

    4. Align the items as we like

    5. Add an extra class

  10. The container further contains a wrapper which contains the child menu links. We have an option to:

    1. Add/remove columns. We can add a column in parallel to the child menu links if we want

    2. Hide when collapse

    3. Set grid size for the column

    4. Insert a block in that column that we added

    5. Show block title

    6. Add an extra class

  11. On moving further and clicking on the child menu link we are presented with the option to

    1. Add a submenu. If we add a submenu we would have the option to insert a block in that submenu

    2. Group the submenus. This means that the submenus would appear below the child menu links

    3. Break column

    4. Add an extra class

    5. Icon

    6. Item caption

  12. On moving further into the sub-menu we would be able to see that the sub-menu is wrapped in a wrapper. On selecting the wrapper, we would be able to

    1. Add a row

    2. Hide when collapse

    3. Specify the width of this sub-menu

    4. Align text

    5. Add an extra class

  13. On moving further and selecting the block in the sub-menu we would have the option to

    1. Add/remove a column

    2. Hide when collapse

    3. Set grid size

    4. Add a block

    5. Show the block title

    6. Add an extra class

  14. You can have as many child menu items as you want and blocks with them.

Placing the block

The TB mega menu that you created is essentially a block. So you would have to place it in a region like other blocks.

  1. Go to /admin/structure/blocks.

  2. Search for the TB mega menu block that you created and place it in the desired region and save it.

  3. On the specified page the TB mega menu will appear.

Note

Blocks permission

You have implemented the blocks with bean module by creating block types with and then creating blocks (the content that we need to show) for it. This block needs to be given permission. To do so:

  1. Go to /admin/people/permissions.

  2. Search for this term your_bean_block_name block (where your bean block name is the name of your block).

  3. Look for the your_bean_block_name block: View Bean permission option.

  4. Check the permission for the anonymous user.

  5. Clear all cache and check the site for the anonymous user. You will have the block in the TB mega menu shown for the anonymous user.

All blocks inside TB megamenu appearing at once

  1. One thing to keep in mind is that when creating a TB mega menu for the first time if there are sub-menus and blocks inside them then they would all appear one on top of each other.

  2. This is because the animation is set to none.

  3. You would have to select the animation as fading or any other animation style. It is only then that on hovering, the blocks would appear else not.

May 13 2016
May 13

This week we had to move some of our non-HTTPS Drupal websites over HTTPS. The task is pretty straightforward. All you need to do is get an SSL certificate from your favorite vendor and configure your web server to use it over port 443. Things get a little complicated if you have layers of services over your web server. In our case we have Varnish. As a reverse proxy engine varnish helps you to reduce your response time by caching responses from your web server and keeping them in RAM. Most of our static content reaches you from varnish. But Varnish has an issue it can’t shake hands with a client with an SSL certificate yet. So what you do is introduce a new layer of web server over it, one which can handle SSL certificate and pass the request to Varnish.

img1

The flow of request from the client to web server on SSL connection with Varnish caching.

Both the web server layer in the above architecture can be the same software but due to distributed architecture in our case, we had Nginx over Varnish and Apache under it. We did set up Nginx with the ability to serve user on port 443 with an SSL certificate. Then we forwarded it to the port where Varnish is listening. Which in turn requests Apache for the page requested and stores the copy of it for future.

So far so awesome? But no, our web pages were breaking. It seemed there are some issues with CSS and JS of the whole site. Thinking what could go wrong I checked into our configuration.

  1. Whether the site is working nicely on Apache port. It was.

  2. Whether the pages are breaking over the Varnish layer.

  3. Ensured that Nginx is, a) redirecting all HTTP requests to HTTPS and b) properly forwarding all HTTPS requests to the port where Varnish is listening.

  4. Ensured no special .htaccess rule of apache is making the site misbehave.

All seemed fine.

Next, just to ensure things we added print_r($_SERVER); into index.php to echo all the headers being received by Drupal. I cleared varnish cache and reloaded the site. And the reason for misbehavior was right in front of me.  Drupal gets to know whether the site is being requested over HTTPS or HTTP via the header [HTTPS']='on'. It was missing. That header is how Drupal makes the internals ready to serve for HTTPS. In our case, although Nginx was sending ['HTTP_X_FORWARDED_PROTO'] = 'https' & ['HTTP_X_FORWARDED_PORT'] = 443. Drupal was not utilizing it.  So I added the following code into settings.php file of Drupal

// Tell Drupal to utilize the headers sent by nginx to recognize that the communication is happening on HTTPS port

if(isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
{

  $_SERVER['HTTPS']='on';

}


Tada! CSS and JS of the site started behaving normally over HTTPS. So to conclude with, in your web stack always try to make all layer know each other.

Mar 28 2016
Mar 28

Search Engine Optimization (SEO)  is an all time hot topic for the web. Whether you are a webmaster, a business website owner or a blogger, everyone wants to appear in the first page of any search engine. If you are new to this SEO then let me define it. It is the process of affecting the visibility of a website or web page in a search engine’s unpaid results often referred to as natural, organic or earned results.

SEO isn’t just about making search engine friendly websites. The focus should be more on making a website even better when people visit .The primary method for most internet users to find a webpage is through search engines like Google, Bing and Yahoo.These are the commercial search engines which add traffic to one’s website. Google is an important search engine but it should be remembered that there are other local search engines of different places which should also be considered. Like in India here is the list of local search engines which includes askme.com, justdial.com and khojmaster.com etc. And yes, social media has a huge impact in gaining traffic too but that is out of the scope of SEO. Here, we will dig deep into Search Engine Optimization and the latest seo techniques 2019.

Functionalities of search engine:

  1. Crawling

  2. Building the index

Why do we require SEO?

SEO is required in everything whether online business or gaining popularity in a search engine. It helps in:

Approaches to SEO:

I am classifying it into two parts:

  1. Integrated approach

  2. Holistic approach

Integrated Approach to SEO

User preferences  

There are different seo techniques. In this approach, as a SEO webmaster, one should understand the user needs by the keywords which are frequently searched by the user. For example if a person is searching for something on a search engine the result should display immediately as soon as he searches. My basic recommendation to website owners is to avoid low volumes keywords because low volume keywords do not drive much traffic.

Content

This step will give you an approach for how your content should be well optimized. The responsibilities lie on the content writers to produce a good source of content which can be easily optimized by organic search engines. Content writers should have proper knowledge about the title, header tag, image tag, meta tags and page URLs and other on page optimization methods.

Role of SEO Team

The role of SEO team comes in optimizing the content technically, the dependency lies on both writers and the SEO team. Consistency should be maintained between keywords, content, and technical elements.

Techniques to Gain traffic

Two essential strategies which a SEO team requires are to “publicize” and to “promote”. For publicizing  the content we need to check the internal links and whether they are linking to a relevant page or not. There are some guidelines which should be followed while promoting the content of a website submitting the website to local search engines, online directories, submitting the site to commercial search engines and social networks.

Evaluation

This is last approach where I am mentioning the techniques for how to measure SEO impact as per business performance. For measuring the success of SEO the three key performance indicators to be taken into consideration are rankings, traffic and conversions. Apart from them what type of business person is engaged into shall also be considered. Diligently evaluating the keywords help us track the word which are  most searched. This indicates the progress of searching ranking of our pages.

Holistic Approach

In the integrated approach you have come across links, crawls, keywords, and content but to get more successful SEO you should adopt more innovative methods and techniques. In this approach we will focus more on other areas where you can boost your rankings in SEO market, things which need to be taken into consideration are:-

  • Page speed

  • Crawling

  • Localization

  • Webspam

  • Press & PR

  • Structured data

  • Mobile

  • Knowledge Graph

  • Content

  • UX/ design

  • Social

  • Usage data

  • Internationalization and

  • Email.

Below are the major points that need consideration.

Page Speed

Page speed matters a lot to both search engine and users. In terms of search engine, Google indicates pagespeed  as one of the signals used by its search algorithm to rank pages and in case of users it provides good user experience.

Crawling

Within my post, I have mentioned that crawling is an important function of SEO. Its functionality is mentioned in this approach, crawlers or spiders visit the particular site to get the information related to the keywords which are searched by the user.

Localization

With reference to localization, every user types the keywords in their native language. To connect with the users of the different region one needs to understand what key search terms are used  by the local users.

Webspam

Webspam or search spam is defined as the manipulation of the web page to provide artificial rankings in search engines. There are many guidelines which are defined by different search engines related to SEO spam.

Press Release

From the early century, it has been seen that press has a significant impact on the people from around the world. Similarly, it is an important strategy in SEO on the internet. One of the greatest advantages of online PR is it increases online visibility and helps in promotion.

Structured Data

Structure data is an extra information which is provided to the user when a user seeks for the information. It is added directly to page HTML markup. With the help of proper structure data, crawlers can easily determine about the details of the particular website.

Mobile

With the evolution of mobile, people are switching their work from desktops to smartphones. The following should be taken into consideration for mobile optimization in SEO i.e. pagespeed,  CSS, javascript, images should not be blocked. Eventually, the site should load fast and smooth on mobiles and tablets.

Content

It doesn’t matter whether it’s an integrated approach or holistic content will always be an important element of an SEO which cannot be overlooked.

Ux / Design

Great user experience attracts more visitors to the website. It has been seen that today’s SEO is not just about optimized content it also about user experience this is the reason why designing team works hard to achieve the target users and customers.

Social

In recent years, social media is equivalent to press. It has become the first choice of entrepreneurs and website owners. It provides higher conversion rates almost as good as search engines.

Email

Email marketing helps to drive the best SEO results. Usually email marketing initiative is taken by marketers of an organisation for various campaigns.

In holistic approach target is not just to understand from the perspective of an individual user but  also to understand the market share. Both marketing team and SEO  team should collaborate to have a perception about overall behaviour of the users.

SEO is not only a necessity but also an important element in every field from posting a blog, branding of the website, or business. It can be rightly said that SEO is the heart of today’s businesses. We can rightly say that SEO is the soul and internet is the body.

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