DEV Community: EstherIdabor

Step-by-Step: A Developer’s Guide to Efficiently Planning a Web Project

EstherIdabor — Wed, 12 Jul 2023 02:57:17 +0000

Introduction

A common mistake anyone new to building web projects encounters is opening a code editor immediately after a project idea comes to mind. Without a strategy, you will likely get confused about where to start, how to start, and how to finish building the project. It is like writing a technical article without an outline; you will easily run out of gas while at it.
Even if you are not new to building projects, after reading this article, you will know how to plan a project and how having a project plan helps you simplify the development process, add features easily, and expand your project.

Develop a Strategy.

Have you ever been in a fix while trying to build a web project? Or did it ever seem like you were trying to bite off more than you could chew while building the project?
Strategically planning a project involves breaking the project into tiny bits that reduce the complexity of building that project and give you a clear picture of what you are to build and how you are to build it.

Every project in a standard organization goes through an elaborate planning phase to bring the project to fruition. There are some common roles involved in building a web project which include; a project manager, product designer, and developers.
When building your project, you are likely to be a lone worker, which means you have to embody all the features of a standard team(a project manager, a designer, and a developer) while building your project so that can be very daunting.
However, creating a strategy and following a process gives you a sense of direction and a clear path to build your project.

Adopting the art of project planning helps you break away from tutorial hell. Breaking away from tutorial hell is challenging for most people because most tutors only show you how a project is built and don’t take you through the thought process. Having a project plan guides your thought process and prevents your mind from being all over the place. With a project plan, you are more focused on how to implement a particular feature than on how to build the entire application right off the bat.

The basic steps involved in planning a web project

There are various methods of planning a project. The most basic involves the following steps:

User story
Project architecture
Development phase

The User story helps you determine the intended features of the app, the Project architecture creates a design of how those features will be implemented, and the Development phase is the final step where you build the project base of the project architecture.

As a case study, you will learn the thought process and project plan for building the client side of an expense tracker. However, the strategy and process can guide you in planning any application you want to build.

User story

This is an informal description of a web app's functionalities from an end user’s perspective. It is a high-level overview of the application that describes how the application will deliver a particular value to users. Thinking about the app from an end user's point of view helps you determine the features you need to implement to make the app work as intended.

A common format for writing the user story is; As a user[description of user], I want[functionalities] so that[benefits].

For an expense tracker, the user is regarded as anyone who wants to manage their finance and signs up on the app.
Hence the following are samples of user stories:

As a user, I want to log my weekly or monthly budget so I don’t spend above my budget.
As a user, I want to log in any expense I make with a description and date to keep track of the money leaving my account and its use
As a user, I want to see all my expenses incurred in a week, month, or year.
As a user, I want to see what is left of my budget and my total expenses.
As a user, I want to be able to search for any expense incurred using the description as a keyword.

By analyzing the user stories, you can determine the web app's features.

A flow chart is imperative to demonstrate how these features interact, what actions a user can perform on the app, and the process it leads to. A flowchart helps you visualize the different actions a user can perform and how the app responds to those actions. It gives you a pictorial view of what you intend to build.

The image below is a flowchart of the expense tracker app created using the laid-out features.

Worthy of note at this point is that you might not have all the features of the final application in mind, so after setting down the template, you are likely to revisit these sections of the project plan as more ideas come to mind. It is expected that the flowchart changes throughout the development process, It is not cast in stone.

Project Architecture

Project architecture demonstrates the structure and organization of a project. It serves as a roadmap that helps you build and maintain the code efficiently.
In the traditional sense, architecture refers to creating a design for a building or structure. Most structures erected always have an architectural design that describes the pattern of that building and guides how it should be built. Project architecture in web development is no different.
The project architecture gives you a picture of how the various components of the app interact. It guides the development process and shows how the different logic that forms the app is implemented.

For a real-world project with a standard team, project architecture can go far deeper and more complex than what is explained here; what you will read about is adapted to building small-to-medium projects.

There are various types of project architecture or ways to organize your code. The common types are;

3-tier architecture: This is the classical type of project architecture where the application is divided into three layers; the presentation layer, which is responsible for rendering the user interface, and the application layer, which handles the business logic or core functionalities of the app. It can be regarded as the brain of the application because it acts as a liaison between the presentation layer and the data layer, which is responsible for storing and retrieving data.
MVC architecture: This is a more recent and widely used approach to project architecture. It also divides the application into three components: model, view, and controller (MVC). The model represents data handling, the view displays the data, and the controller handles user input and updates the model.

These types are best demonstrated using full-stack applications, where the view is handled by the front end and the data layer by the back end.
However, when building a small-medium project, you can follow a customized approach or adapt any type to fit the project. The main aim is to give your project a structure upon which you can develop the functionalities.

A good architecture involves breaking your project into components and building your application component by component. Thus a good architecture for the expense tracker app can be designed in the manner below;

Data management
One of the most important aspects of any architecture is to decide where and how to store the data because data is the most fundamental part of any application. From the user stories, you can see that the expenses and budget data entered by the user into the app need to be stored. The implementation of how the data is stored and retrieved will depend on the programming language, but with JavaScript, the logic that can be applied here is that data is collected from the user and kept in an object or array. In a real-world application for the persistence of such data, they are stored in a database. However, you can keep the data in a localStorage for a simple frontend app.

The UI component
If you do not already have a mockup design for the app, here is the place to describe how the UI will be displayed, that is, the overall layout of the expense tracker, such as a tab component for switching between periods or categories of expense, forms for login and registration, call to action buttons e.t.c

The controller or application layer defines how an application handles data received and events, such as submits and clicks in a 3-tier architecture. However, You can derive several components from this layer such as Expense management, Budget management and User management, all these can also be divided into further sub-components.

Expense management

Expense creation defines the logic for collecting expense data from the user and adding it to the storage. In this component, you will be thinking of creating a function that gets attached to a submit button or an addExpensebutton.
Expense retrieval defines the logic for retrieving and displaying a user’s expense history depending on the timeframe chosen by the user, typically a filter method is created here. Another filtering method is also pertinent for a search feature where the user search for an expense base on a category such as “food”, “grocery”, e.t.c
expense modification: This component defines the logic that enables the user to edit or delete existing expense entries

Budget Management:

Budget creation: This component defines the logic for collecting a budget amount from the user, storing it in the array or object, and displaying that to the user.
Budget tracking: This component defines the logic for displaying the budget and calculating what is left after deducting the expense incurred.

User management:
User authentication: This component handles user registration and login, two functions can be created here, a function that stores the user’s data after registration and a function that checks if the data entered by the user during login can be found in the storage.

The beauty of this approach is that as more features come to mind, you can easily create a component that handles that feature.

here are various benefits as to why you should design a code/project architecture; There include;

Modularity: Having a project architecture promotes modular programming, which is the separation of the app's functionalities into somewhat independent components/modules. With the division of the app into parts, you build your app by developing each component which is composed of everything(the logic) required to execute an aspect of functionality. This makes the code easier to read, debug and reuse.
Extensibility: A good architecture allows adding new features or integrating with external systems without requiring significant modifications to the existing codebase. For the expense tracker app, if you wish to include payment gateways to facilitate direct expense tracking from bank accounts or credit cards, you can develop a component on the payment gateway and connect it to other components, such as budget management and expense tracking.
Scalability: A well-architected system allows for future growth and expansion by providing flexibility to add or modify components without affecting the entire system. Without a project architecture, you will likely overhaul your entire codebase to scale a project.

Development phase

With the project architecture well-designed, it becomes easier to build the application's codebase and implement all the logic created. You have a clearer picture and an understanding of what you're to build, and it becomes easier to fix any issue that may arise while building. It is important to reiterate at this point that project plans are not cast in stone. While building you might discover you need to modify the project plan, either add or remove something from it, so do not fret about making it perfect before you start writing your code.

Conclusion

While building powerful projects that showcase your abilities and make you employable, it is necessary to showcase your approach or project plan. Following a strategy shows your ability to think critically and systematically; that way, anyone viewing your portfolio can appreciate your holistic ability to create digital solutions for a problem.
An important takeaway from this article is to divide your project into small chunks and components that reduce the complexity of building the project.

Further Resources

Tips on Creating a Responsive Design

EstherIdabor — Mon, 12 Jun 2023 17:48:48 +0000

Before the advent of smartphones and other mobile devices, websites were viewed on computers only, so the term responsive design was non-existent. As mobile devices became an alternative to assessing the web, the need for a responsive design in creating websites arose.

Statistics now show that website record more views on mobile than desktop computers, hence the need to be aware that a website can be viewed on devices with different viewport dimensions. Consequently, you should be able to build a web design that can adapt to all screen sizes.

Creating a responsive web design is challenging because by convention, you must adjust your code at specific breakpoints to provide a good browsing experience for visitors across all devices.

CSS breakpoints are widths where your style is adapted to suit specific viewports and screen sizes. It can be a hassle for specific designs to adapt your style to different breakpoints, especially with a desktop-first approach. However, there are particular properties whose value can be set so that you don't worry about modifying them in a breakpoint, you will read about them in this article.

Prerequisite

Basic knowledge of HTML and CSS

What is Responsive Web Design?

Responsive web design refers to an approach that involves making web layouts and elements adjust well to any device and maintain a good view. It is commonly achieved with the use of media queries. With media queries, you can define different styles for different screen sizes.

Media queries are very crucial in creating a responsive website. However, as a developer, it is essential to accomplish a task with as few lines of code as possible. Therefore, in this article, you will learn tips and tricks to write optimized codes that save you lines of code on a media query. With these tips and tricks, you spend lesser time making a layout responsive.

A more interesting fact is that these tips make a web design fluid. Fluid Design is a new approach to creating a responsive layout that entails setting your properties to values that change with the viewport and not breakpoints. In other words, Breakpoints have no place in fluid design because your design immediately and without a media query adapts to a change in the viewport dimension.

1: Set your width in percentages.

In CSS, the width of any content is always 100% of the parent container by default. In this section it is assumed the parent container is the viewport. Whenever you adjust the viewport the width adjusts simultaneously.
However, when you set the width of elements in CSS using absolute units such as pixels, they make the width rigid and unresponsive to different viewports without a media query. Instead, set the width of contents using percentages because it makes the width fluid and responsive to different viewports.

In the scenario where you set the width of a container to a value of 900px, the contents will overflow at a lesser screen size such as a device of 372px. This cause a horizontal scroll bar to appear on the page, which can mess up the page’s layout.
You can write a media query to adapt the width to smaller devices, giving it a lesser value for smaller screens. A much-optimized way is to set your width using percentage, and only use pixels for max-width. Doing it that way ensures it covers up for different viewports and screen sizes.

If you set the width of a container to 80%, at every screen size, the container will take up 80% of the width of the parent element or viewport in this case. However, if you do not want the container to grow above a certain size at large screens, you will need to set a max width.
If you add a max width of 900px in addition to a width of 80%, it means that no matter how large the screen grows the width of the container will never exceed 900px, and at lesser screen sizes the contents will always be 80% and not overflow out of the viewport. It is important to set the max width because it can be difficult to keep up with a long line of text on a huge screen.

.container {
  width:80%;
  max-width:900px;
}

Also, you can set the width of a container using the min() function. The min() function is a modern CSS function that ensures the lesser of the two values given to it is taken as the value of a property.

 .container {
      width: min(80%, 900px);
    }

On a large screen of 1800px, the lesser value is 900px, so 900px is taken as the width. On a lesser screen of 372px, 80% of 372px is the lesser value, so it is taken as the width. The video below shows how the container's width adjusts to different viewport widths using the code snippet above.

2: Do not set the height of a Container.

The height of elements increases as you adjust the viewport to smaller screens. This is to keep up with the decrease in the width. Setting a height on a container keeps the container static and unable to grow with the height of the elements which means elements will overflow out of their container messing up the page’s layout. To avoid this, do not set a height on a container.

This gif demonstrates what happens when you set the height of a container.

Typically, the height will constantly adjust as the viewport is adjusted. However, you might need to set the height of a container. In such instances set the height using min-height.

Min-height ensures a container will not be smaller than the set height, but when the height has to increase to accommodate the contents, it will.
This is what you have with min-height.

3: Use the auto-fit property of the grid layout to allow the browser implicitly set the number of columns based on the viewport.

When you explicitly set the number of columns in a grid layout, you have to gradually decrease it in a media query as you progress to smaller screens at each breakpoint or vice versa. An easier approach to creating columns is to allow the browser implicitly set the number of columns and rows based on the screen size. This can be achieved by setting the repeat function of the grid-template-column property to auto-fit.

This code snippet below demonstrates the explicit approach to creating columns of the same size in CSS.

   .container{
    display: grid;
    grid-template-columns: repeat(12, minmax(200px, 1fr));
}

The repeat function tells the browser to repeat columns as many times as stated in the function, and the size of each column should be the second value given.
The minmax() function defines the extent to which a property can grow or shrink which is a size range greater than or equal to the ‘min’ and lesser than or equal to the ‘max’. This means that the column's size will not exceed the maximum value and the minimum value stated. Rather than being squished, it will overflow out of its container.

To let the browser implicitly set the column, add the auto-fit keyword in place of a value for the number of columns in the repeat function.

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

The auto-fit keyword tells the browser to adjust the size and number of columns so that the element will wrap into rows when the viewport's width is not large to fit them.

The minmax() function tells the browser to distribute any available space to the columns equally as many as can fit into a row, such that each column occupy one fraction of the available space. It also tells the browser that when we are left with one column to a row, that column should not go below 200px.

This approach still leaves doubt about this process being entirely responsive or fluid. While it is rare to find a device that is less than 200px, if there happens to be one, the column in the grid layout will overflow. To circumvent that, consider the code snippet below.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr))

This approach of using the min() function is to ensure that the columns do not overflow if the available width falls below 200px, instead, it takes up just 100% of the available space.

4: Use the `flex-wrap` property to make your flexed items responsive.

There are two common ways of creating a layout in CSS; the flexbox and the grid display. The preceding tip covered how to make a layout responsive in the grid layout.

This tip covers how to make a flexed item responsive. If you prefer your flexed items to transition to one column from multiple columns instantly as the viewport is adjusted, you can use a media query for that. However, flex-wrap is your best man if you want to gradually decrease the number of columns as the viewport is adjusted from a larger screen to smaller screens.

Activating the flex-wrap property in CSS makes the browser responsible for making your flex layout responsive. This property is valuable when you need to create multiple columns, and you don’t want them squished together as the viewport is adjusted.

    .div{
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: space-between;
    }

When the viewport is adjusted, the columns wrap or are pushed into new rows. Without setting the flex-wrap property to wrap, you have to keep adjusting the number of columns at each breakpoint or they overflow out of the container.

5: Use the clamp method to make your typography responsive.

As you adjust the viewport and screen size, the width changes. To maintain a good layout, the font-size of elements must also change.
Typically, you will want the font-size on a larger screen to be relatively large and on a smaller screen, to be relatively less so anyone can see letters with ease.

To let the browser handle the task of making your fonts responsive depending on the screen size, use the clamp() function.
The clamp() function clamps a value between an upper and lower bound. It accepts three values, anything more or less it won’t work. It accepts a minimum, a maximum and a median or preferred value.

font-size: clamp(1.5rem, 1.5vw, 4rem);

The median value is the default value and is given a relative unit to make the design fluid and responsive. As the viewport is adjusted, the value of the font-size changes. However, if the median/preferred value becomes lesser than the minimum, the function takes the minimum value as the font-size. Similarly, if the middle/preferred value exceeds the maximum value, the function takes the maximum value as the font size.

The font-size which is in vw changes with the size of the viewport. However, it doesn’t go below the minimum bound or above the maximum bound.

This might sound uninteresting if you are unfamiliar with using relative units such as vw. Consider the snippet below to help you understand how to arrive at a value for the font-size in vw;

1.5vw = 1.5% of the width of the viewport, 
if the width of the viewport is 1000px. Therefore,
1.5vw = 15px on a 1000px viewport

Having that in mind, you can calculate the vw value of a font-size in pixels.

Notice the font size of the title changing in size as the viewport width is adjusted. As the font-size increase in size with the viewport, at a certain point, it stops increasing and as it decreases in size with the viewport, it stops decreasing at a certain point. That is when the upper and lower limit is reached respectively.

Conclusion

This article can be summarized into three note-worthy points;

Avoid fixed sizes; Fixed sizes like setting the width of a container in pixels and setting the height of a container make responsive design tedious because you have to overwrite many properties with every breakpoint. Relatives units such as percentages and view width ease the burden of adjusting the width at each breakpoint because the width is adjusted with the viewport.
Adopt modern CSS approaches; Modern CSS functions like clamp(), min()and max make it easy to build a responsive site with a fluid design where you do not have to worry about breakpoints. This article used clamp () to demonstrate how to make font sizes responsive. However, it can also be used for various properties such as width.
Media queries should be used for more intricate tasks like adding a new style to a viewport and not overwriting many properties.

Resources

To learn more about modern CSS functions you can use in your project check out the articles below.

Struggling with media queries or want to know more about media queries? the article below will be of help.

A Complete Guide to CSS Media Queries

These articles will help you further prop up your responsive design game.

Animating contents on scroll Using the intersection observer API

EstherIdabor — Tue, 14 Mar 2023 10:56:12 +0000

Introduction

A common feature you find in most modern web pages and applications are sleek and eye-catching animations that come into play as you scroll through the webpage. This leaves visitors or users with an opulent and grandiose feel of the page or application.
Triggering animations on an element as a page is scrolled entails having information about the position and visibility of that element relative to the viewport.
Previously to observe for visibility of a target element on a certain position of the web page or viewport, the Element.getBoundingClientRect() (gives information about the size and positioning of an element within the webpage), and the windows scroll event were used. However, using that comes with reduced performance and a bad user experience when you have to do that for multiple elements. With the observer intersection API, you can do that without worrying about jeopardizing the performance of the webpage. Now let's discuss the intersection observer API.

Prerequisite

Understanding of HTML and CSS.
Basic knowledge of JavaScript.

What is the Intersection Observer API?

The intersection observer API allows your code to observe or monitor changes based on how a particular target element intersects with an ancestor or root element. For the purpose of understanding the above statement, take the root element to be the viewport.
The viewport is the visible area of the web page, you can decide to apply styles to the contents of your web page as you bring or take it out of the viewport. One way to go about that is by setting an intersection observer, such that your code performs a task at a set percentage of the intersection of the target element with the root element(the viewport). To understand better consider the example below.
Suppose you tell a group of individuals that they would get $200 each from running on a field, but then a person can only be given that amount of money when they run at least 200 km from the starting point, you are setting an observer.

The above-animated cards display different ways an AI company can help manage client projects. As the page is scrolled, the cards get animated, drawing a visitor's attention to the contents of a card, and as they advance out of the viewport, the animation disappears.
If you follow along with this article you will learn how to trigger animations using the intersection observer API like the video above and apply similar logic to your project.

Creating the web page

The HTML

First, you start by creating a container for the cards and giving it a class of .card-container. Then create each individual card wrapped in a div and give it a class name of .card, each card should be given a unique class name as well since they will all have different background-color during animation.




<div class="card-container" id="cards">
      <div class="card card__1">
        <div>
          <h2 class="secondary-heading">Supervisor</h2>
          <p class="regular-text">
            Monitors activity to identify project roadblocks
          </p>
        </div>
        <div class="img-div">
          <img src="images/icon-supervisor.svg" alt="" />
        </div>
      </div>
    <div class="card card__2">
      <div>
        <h2 class="secondary-heading">Team Builder</h2>
          <p class="regular-text">
            Scans our talent network to create the optimal team for your
            project
          </p>
      </div>
        <div class="img-div">
          <img src="images/icon-team-builder.svg" alt="" />
        </div>
      </div>  
  ....... 
</div>

The CSS

After creating the markup, proceed to style each <div>to be in the form of a card using the styles below.

This might seem like a lot, but carefully going through it is necessary to understand how the animation works.

The class .show created above with the CSS ensures that when it is present together with the class .card, the width of the card and the colour of the text change. The background colour of each card will be changed as well to different colours.

Dynamically adding and removing the class .show creates the animation.

This is a repo to the source code, you can choose to download just the HTML and CSS and follow along with the JavaScript

Implementing the Intersection Observer API

To create an intersection observer object, you call the constructor function.
const observer = new IntersectionObserver(callback, options);
The constructor function takes in two arguments

A callback function: A callback function is a function that is executed when a particular condition is met.
An options object: The options object defines the properties of the intersection observer and custom properties upon which the callback is fired.
The option objects

The options object is always created with two properties: the root and the threshold.

The root property

This is the element the target will intersect with to fire the callback. When the root is set to null, it automatically defaults to the viewport. The root can be anything as long as it is an ancestor of the target element and the target element is a descendant of it.

The Threshold

This is the percentage of the intersection at which the observer callback is fired. The value ranges between 0 to 1, representing 0 to 100%.
If you set the threshold of intersection to 0.3, you are setting the callback function to fire whenever 30% of the target element intersects with the root element. You can have an array of thresholds such as [0.25, 0.5], this simply means the callback will fire anytime 25% and 50% of the target element intersects with the root element.

The root margin

When present, it invisibly adds a margin to the root element. It is very similar to the CSS margin property and can shrink or grow the size of the root element, it can either be a positive or a negative value.
A value of 100px means the root will grow by 100px, which also means when the target element is 100px away from the set threshold, it is already considered intersecting. A negative value, for example -50px means the root will shrink by 50px. As you scroll, when the target is 50px beyond the threshold, it is considered intersecting, and the callback is fired.



const cardOptions = {
 root: null,
  threshold: 0.5,
  rootMargin: "-50px",
};

The Observer Callback



const cardCallback = function (entries, observer) {
//if the threshold is an array
        for (entry of entries){
        // // code block to be executed
}
         // if the threshold is just one
    const [entry] = entries; // this or
   //const entry = entries[0] 


  if (entry.isIntersecting) {
   //Do something
  }
};

The callback specifies what happens when the target is intersecting and when it stops intersecting with the root element.
It receives two arguments, an array consisting of intersection observer entries named the entries and the reference to the observer object, for this article you won’t need the second argument but it's important to know it exists. The length of the entries array is dependent on the threshold, for every threshold an intersection observer entry exists and it stores information about the intersection of a target element on its root container, so if you have three different thresholds, you will have an array made of three different intersection observer entries observing for the different thresholds.
The callback is fired immediately after the DOM is loaded and in two instances, when the target element starts intersecting and when the target is no more intersecting. However, you can create a logic that performs a task only when it is intersecting.
The intersection observer entry is an object with different properties.

If you log the intersection observer entry to the console from the callback, you get an object as can be seen above.
The properties of interest to us are;

intersectionRatio: It is the value of the target element currently intersecting with the root, as you scroll the value changes and it is a float value between 0 and 1.
isIntersecting: this always gives a boolean value, when it is true, it means the target element has crossed the threshold and if false it means the target element has not gotten to the threshold of the intersection or has stopped intersecting with the root element.
isVisible: also returns a boolean value depending on if the target element is visible to the viewport or not.

The value of “intersectionRatio” and “isIntersecting” change as you scroll up and down the viewport, that said, you can create a logic that performs a task when the “isIntersecting” property is what you need it to be or not.
To end this section, you must ensure to call the observe method on the observer object.

observer.observe(targetElement);

The observe method swings the observer into action on the target element, omitting it means the intersection observer is not yet observing the target element on the root.
Another method that can be called on the observer object is the “unobserve” method. This is called when you want the observer to stop observing the target element.

The JavaScript

Having all that information in mind you can now proceed to create an intersection of the card on the viewport.
give the intersection observer object the name cardObserver.
const cardObserver = new IntersectionObserver(cardCallback, cardOptions);

After that, create the callback and the options object. Although you can create the object first, the callback and options object should be defined above the card observer, because you cannot access a variable or an object that has not yet been initialized.



const cardOptions = {
  root: null,
  threshold: 1,
};

The root element is set to null and recall that setting it to null means you want the root to be the viewport. The threshold is set to 1 so that the callback is fired when the card is fully in the viewport, but you can choose any value you want.



const cardCallback = function (entries) {
const [entry] = entries;
   //const entry = entries[0] 

  if (entry.isIntersecting) {
    cards.forEach((card) => card.classList.remove("show"));
    entry.target.classList.add("show");
  } else {
    entry.target.classList.remove("show");
  }
};

The entries for this callback have just one intersection observer entry object because just one threshold was specified.
To get the element from the array you can either assign the first item to a variable which happens to be the only element or use array destructuring as shown above.

It is important to note that adding and removing the class .show to the card class list is what brings about the animation. Keeping that in mind, create a condition that checks if the “isintersecting” property of the intersection observer entry is true, it is true if the intersecting ratio is 1 and false if it is less than 1 because of the set threshold.
If "isIntersecting" is true, you add the class .show to the card class list. Before that, the class .show should be removed from every other card, because the cards are not big enough to accommodate the viewport alone and this invariably means that the show class will be applied to two cards at the same time and at every point you want just one card to be animated. When “isintersecting” becomes false, as it advances out of the viewport the else condition is then executed, which is to remove the class .show.

To end, call the observe method on all cards.



cards.forEach((card) => {
cardObserver.observe(card);
});

Putting it all together, this is how your code should look like;



const cardCallback = function (entries) {

  const [entry] = entries;

if (entry.isIntersecting) {

    cards.forEach((card) => card.classList.remove("show"));

    entry.target.classList.add("show");

  } else {

    entry.target.classList.remove("show");

  }

};

const cardOptions = {

  root: null,

  threshold: 1,

};

const cardObserver = new IntersectionObserver(cardCallback, cardOptions);

cards.forEach((card) => {

  cardObserver.observe(card);

});

Conclusion

If you have carefully gone through the article, kudos to you. while they are many use cases of the observer intersection API, such as:

Implementing a sticky-menu
Lazy-loading of images or contents as a page is scrolled.

The focus of this article was on triggering animations using intersection observer API. The reason why intersection observer API does not impair performance is that it is asynchronous. Web APIs are asynchronous and run on a different thread on the browser, so do not slow down the execution of other tasks.

Resources

To learn more about intersection observer API and the various use cases, you can check out the following articles:

DEV Community: EstherIdabor

Step-by-Step: A Developer’s Guide to Efficiently Planning a Web Project

Introduction

Develop a Strategy.

The basic steps involved in planning a web project

User story

Project Architecture

Development phase

Conclusion

Further Resources

Tips on Creating a Responsive Design

Prerequisite

What is Responsive Web Design?

1: Set your width in percentages.

2: Do not set the height of a Container.

3: Use the auto-fit property of the grid layout to allow the browser implicitly set the number of columns based on the viewport.

4: Use the flex-wrap property to make your flexed items responsive.

5: Use the clamp method to make your typography responsive.

Conclusion

Resources

Animating contents on scroll Using the intersection observer API

Introduction

Prerequisite

What is the Intersection Observer API?

Creating the web page

The HTML

The CSS

Implementing the Intersection Observer API

The Observer Callback

The JavaScript

Conclusion

Resources

4: Use the `flex-wrap` property to make your flexed items responsive.