this is a demo

Digital. Transformation. Two words that are, at this point, essential to every business. Here’s why; with the onset of technology being readily available in our times, arose a need to integrate this very technology into said businesses, with the purpose of increasing their reach and gaining more efficiency. Transforming indicates converting non-digital or manual processes with digital processes or replacing older digital technology with newer digital technology. It’s not only a need of our time, but these needs are going to keep progressing with the passage of time, ultimately leading to the more evolved forms of digital transformation.

Apart from the obvious requirement of digital transformation we just talked about. There has been a significant increase ever since COVID-19 has been pronounced a pandemic. There has been a great influx of businesses and companies shifting to the digital world. Entire markets, vendors and customers have entered the online world and successful digitally transformed businesses are proving as to how this is the future of the business industry now. Although what these companies are doing is digitization, the ever changing world yet constantly demands digital transformation. 

Digital transformation is all about technology, data, process, and organizational change. There are four technologies enabling digital transformation: data science, Artificial Intelligence (AI) and machine learning, automation and the cloud. These are the four pillars, or the four key emerging technologies covering digital, and each has a certain role to play. We have data science for optimization, Ai and machine learning to enhance customer experience individually, automation for add efficiency to the internal processes and lastly the cloud serves the infrastructure side enabling digital transformation.

The process however is not as easy as it sounds, and it has been proved with the massive amount of failed attempts at digital transformations by many businesses. The progression of digital transformation is fundamentally uncertain: variations need to be made provisionally and then accustomed; resolutions need to be made quickly; and groups from all over the organization need to get involved. Leaders have to decide on what apps from which vendors to use, which area of business best benefit from switching to that new technology, whether the transition should be rolled out in stages, and so on.

According to Harvard Business review, there’s 5 reasons a transformation will fail; not recognizing your business strategy, not applying insider knowledge, not paying attention to the customers’ requirements, not involving your employees within the procedure and lastly, not adopting a flat organizational structure. There is no ‘one size fits all’ way to digital transformation but a rather personalized and individual approach for every business. Winners in the digital era break up old power structures so that new ideas and capabilities can be scaled more collaboratively. They put in place outcome-oriented teams tasked with collaborating across the organization and often employ cross-functional capabilities.

What you require when going through a digital transformation is to firstly question the value your business is providing in the online world, how it can differ and eventually be better, what changes your customers would like to see and how the efficiency can be increased. Once you have that figured out, you can now easily recognize your business strategy and its outcome. Next, you can never undermine the importance of IT when it comes to digital transformation because they will be the ones leading the business through it. Embracing adaptive designs is an essential, as upfront investment requirements and KPI’s are rigid and are ways of the old times. 

In the case of digital transformation, the teams who build and maintain the technology must be fully engaged. Earlier we talked about how one of the reasons of the failure of digital transformation is not following a flat organizational structure, let us now answer why. Companies with hierarchies and hard to follow masterplans set by those at the top of the hierarchy will often strangulate the entire process which is why in its place a team of specific experts in their specific domain are required, such as; a Chief Information Officer (CIO), engineers, data architects, business experts, UX/CX professionals and financial analysts, who will overlook the entire project part by part thus making sure it’s effective and operational. One of the best models for flat organizational structures is the Silicon Valley start-up culture.

Digital transformation requires not only a responsible team to take it forward but also agility, talent, critical evaluation, simplification and clear-cut management. However, with perseverance this ‘process’ can be cultivated into our culture and hopefully will be more visible in the coming times.

How to use BEM

Problem statement:

When we work on projects, we usually spend a lot of time maintaining and refactoring the code. That is why it becomes important to focus on things like project architecture, scalability,  naming conventions, etc. Imagine the readability of the code if we do not maintain any standard for naming conventions for the classes of our Html elements and writing CSS for them. Often times we experience problems due to cascading.  BEM comes to help in such situations.

Definition of BEM:

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development Block__Element–Modifier.

Advantages of using BEM:

  • Scalable: It easily supports the code structure as the projects grow.
  • Reusable: Making independent blocks and reusing them according to its requirement in different ways will reduce the writing of CSS code. 
  • Collaboration is easy: Working on a team project or another developer project is challenging if naming conventions are not followed. Many times the developer gets comfortable writing naming conventions for CSS selector which is different for every developer if no standard is followed. This will lead to confusing and unreadable code. BEM comes for help in such situations.  It provides a clear architecture and recognizable terminology for use across projects and among developers.
  • Modular: Block styles are independent, You will not face the problem of cascading. We can use the similar code into other projects if it is required.

How to use BEM

Let us see a few examples. Consider you need to create buttons with three different variants.

 Example 1.

// this creates a normal rectangular button with reddish background-color
<button class="btn btn--primary">
    <span class="btn__text">Know More</span>
 </button>

Example 2.

// this creates a normal rectangular button with dark blue background-color
<button class="btn btn--secondary”>
    <span class="btn__text">Know More</span>
 </button>

Example 3.

// this creates a circular play button
 <button class="btn btn--play"><span class="btn__play"></span></button>

Let us also see what are the common mistakes done when using BEM. Mostly it happens when we have a great-grandchild or great-great-grandchild element inside the component. We tend to make this mistake for example

<div class="card">
     <div class="card__header">
       <h2 class="card__header__title">Title</h2>
     </div>
 
     <div class="card__body">
       <img class="card__body__img" src="some-img" alt="description" />
       <p class="card__body__text">
         Lorem ipsum dolor sit amet.
       </p>
       <p class="card__body__text">
         <a href="/somelink.html" class="card__body__text__link"
           >Know More</a
         >
       </p>
     </div>
   </div>

Here we see that the format that is used is getting unreadable. As the elements in the components are getting nested the classes on the elements are almost not readable. We can see in this example that the pattern followed is something like this [block]__[element]__[element–[modifier] instead of   [block]__[element–[modifier].

Let us correct the above code and see how it should be

<div class="card">
     <div class="card__header">
       <h2 class="card__title">Title</h2>
     </div>
 
     <div class="card__body">
       <img class="card__img" src="some-img" alt="description" />
       <p class="card__text">
         Lorem ipsum dolor sit amet.
       </p>
       <p class="card__text">
         <a href="/somelink" class="card__link"
           >Know More</a
         >
       </p>
     </div>
   </div>

BEM naming isn’t strictly tied to the DOM, so it doesn’t matter how many levels deep a descendent element is nested. The naming convention is there to help you identify relationships with the top-level component block