DEV Community: babafemij-k

Understanding the difference between interfaces, classes, and objects in JavaScript

babafemij-k — Sun, 09 Jul 2023 23:59:54 +0000

Introduction

I came across the following statements while studying from the MDN web docs:

"The URLSearchParams interface defines utility methods to work with the query string of a URL."
"The URLSearchParams() constructor creates a new URLSearchParams object."

And I thought to myself:

What is URLSearchParams?
What is URLSearchParams()?
And what is a URLSearchParams object?

The concepts were overlapping in my head, and I needed to clearly distinguish them. So as I studied more, I took some notes, rephrased some definitions, came up with an example, and finally decided to publish my notes as an article.

Come on, and let's make some incredible findings.

So what do these mean?

The URLSearchParams interface defines utility methods to work with the query string of a URL.

The URLSearchParams() constructor creates a new URLSearchParams object.

Take a few seconds and ponder the highlighted words.

💭

There are three concepts I see in these statements:

The URLSearchParams - which is the interface

The URLSearchParams() - which is a constructor from a class

The URLSearchParams object - which is simply the object created by the class' constructor

So the three concepts for discussion are interface, class, and object.

Interface

An interface is a specification, a guide, or a blueprint that defines how an object should operate or what an object should have. It lets us know the set of methods and properties that an object or a class should implement. It is not necessarily an object; it is not a concrete entity but just a guide that defines an object.

Class

A class is also somewhat of a blueprint for creating objects, but it isn't just a set of declarations like the interface. A class contains the actual, or real-life, implementation of the methods and the properties that the interface wants the object to have. This class (through its constructor) is responsible for passing those implementations down to the objects that will be created.

Object

An object is an instance of a class that is created based on the specifications of the interface. An object is a concrete entity that has the actual methods and properties defined by the interface. Simply put, all objects are conceived by interfaces and brought to reality by a class' constructor. Objects can be manipulated, modified, and interacted with. They are real and not just abstract, like the interface.

Hold on if you don't yet understand. Let's use a relatable example.

💡 Think of it this way, imagine you had a company that manufactured sports cars. 🏎️

The Blueprint (Interface) 🗺️

You have a large blueprint containing sketches of the next fastest car, the board also contains well-written documentation of all the parts of the car and all of its functionalities. This blueprint is the interface. It is not yet a concrete car but it just defines and declares everything about the car, showing the color of the car, the size of the engine, and the components that'll make up the car, etc.

The Assembly Plant (Constructor) 🏭

There is no way a car can just jump out of the board without something actually creating it. We need something to translate your ideas into reality. This is where an assembly plant comes in, something has to be responsible for bringing the car to reality; from blueprint to life so you can sell it to your customers. The assembly plant (class) understands the blueprint well, it is capable of creating every part of the car specified by the blueprint and has the machine (constructor) necessary to bring the car (object) to life.

The Car (Object) 🏎️

Finally, you need something that people want to purchase and possess. The car would inherit everything you planned for it to have from the assembly plant, which consists of the machines for making the doors, the engine, and the circuits. The car cannot just jump out of the board, remember. So the result of the assembly plant gives birth to the real car. Now you can sell to your customers! 😉

In summary, an interface in JavaScript tells you the makeup and capabilities of an object. A class has the actual implementations specified by this interface and can create an object via its constructor. An object is the final product created by the class' constructor.

Examples of interfaces in JavaScript

Source: MDN

The URLSearchParams interface, which defines utility methods to work with the query string of a URL. The URLSearchParams() constructor creates and returns a new URLSearchParams object.

The URL interface is used to parse, construct, normalize, and encode URLs. The URL() constructor returns a newly created URL object representing the URL defined by the parameters.

The FormData interface provides a way to construct a set of key/value pairs representing form fields and their values.

The AbortController interface represents a controller object that allows you to abort one or more Web requests as and when desired.

The AbortSignal interface represents a signal object that allows you to communicate with a DOM request (such as a fetch request) and abort it if required via an AbortController object.

An extra note...

There are two ways to create objects in JavaScript. By using the literal notation or by using a constructor (as we learned in this article). Since objects created using a constructor have an interface, they are usually called by their interface names. This can assist you in naming the variables that will store the objects.

Take a look:

// To create an URLSearchParams object
let searchParams = new URLSearchParams();

// To create an URL object
let url = new URL();

// To create an AbortController object
let abortController = new AbortController();

// To create an object literal
let car = {
    name: "Camree",
    color: "Purple",
    seats: 2,
    isElectric: true,
}

On the other hand, naming a variable that will store an object literal may not be as easy since you are just creating it out of thin air and not from an interface like in the above examples.

Conclusion

Voila! You have come to the end of this article, congratulations. As a JavaScript developer, working with objects is something that'll be a part of you throughout your journey. Hence, it is highly important to understand how they work and their association with other concepts in JavaScript, as we have learned in this article.

Before you go, kindly let me know what you think about this article in the comment section below. I appreciate your feedback much more than you think. Thank you! 😉

Building a Landing Page with Chakra UI and Framer Motion: My Experience as a React Developer

babafemij-k — Tue, 09 May 2023 00:13:30 +0000

As a React developer, I recently had the opportunity to work on a landing page project. I used Chakra UI for styling and found it to be a great choice for creating a clean and modern design. With Chakra UI, I could quickly create components such as buttons, navigation, modals, and forms that looked great and were easy to use.

Another feature of Chakra UI that I appreciated was its seamless integration with Framer Motion. This animation library allowed me to easily animate some elements on the landing page, adding an extra level of interactivity and engagement for the user. The integration between Chakra UI and Framer Motion was straightforward and well-documented, making it easy to implement animations with minimal effort.

Challenges

While working on the landing page project, I encountered several challenges that pushed me to develop my problem-solving skills and taught me valuable lessons about UI development. Here are some of the challenges I faced, along with the solutions I implemented to overcome them.

Unscrollable modals

While working on the landing page project, I encountered a challenge with non-scrollable modals. Specifically, the modals containing the contact forms weren't scrollable, which made it difficult for users to fill out the forms. After spending some time investigating the issue, I discovered that the problem occurred whenever the drawer component was open.
To solve this issue, I created a state variable that tracked whether the modal was open and used conditional rendering to display the drawer component; so whenever the modal was open, the drawer component closed. This approach ensured that the modals were always scrollable and provided a better user experience for the website visitors.

ESP account creation

ESP stands for Email Service Provider. An ESP is a company that provides email marketing and email communication services to businesses and organizations. ESPs typically offer tools and services to manage and send large volumes of email, such as newsletters, promotional messages, transactional emails, and more. Some popular ESPs include Mailchimp, Constant Contact, SendGrid, and Campaign Monitor.

As part of my work on the landing page project, I needed to set up a way for customers to send messages to the client. I decided to use the SendGrid API for this purpose and spent some time learning how to send emails through the API. I even wrote the backend code that would allow customers to send messages to the client.
However, when I tried to create an account on SendGrid, my application was denied. I attempted to create an account using several different email accounts, but all attempts were unsuccessful. I received the same message each time: "You are not authorized to access SendGrid."
To work around this issue, I decided to use the mailto attribute to create a pre-filled email that would be opened in the user's email app. This solution allowed customers to send messages to the client without having to navigate to another page or use an external email service. Although this challenge initially caused some frustration, I was able to find a suitable workaround and complete the landing page project successfully. I had to opt for this solution because the deadline for the project was fast approaching.

Conclusion

I found working with Chakra UI to be a great experience. It allowed me to focus on the functionality of the landing page while still creating a beautiful design. I look forward to using Chakra UI in future projects and continuing to explore its capabilities.

Here's a link to the landing page.

Let me know what you think. Cheers!

Learning about useRef

babafemij-k — Fri, 24 Feb 2023 15:18:23 +0000

"Ref forwarding is an opt-in feature that lets some components take a ref they receive, and pass it further down to a child."