DEV Community: certifieddev0101

Top 9 Frontend Framework

certifieddev0101 — Fri, 18 Aug 2023 14:54:05 +0000

The building blocks of early software development are frontend frameworks. However, there are a lot of alternatives available when it comes to creating visually stunning apps with excellent user experiences. We have put up a list of the top frontend frameworks for you as a service. Let’s investigate them!

Every company in the market today places the highest focus on the user experience. Even the project brief you receive as a developer mentions how straightforward the user interface should be. No matter how complicated the backend processes and procedures are, what people see and feel must be seamless. Some of the most prosperous businesses, like Netflix, Facebook, Instagram, etc., operate under this philosophy.

Any of these websites will wow you with their strength, simplicity, and excellent user interface. All due to the several frameworks that are active in the background. However, there is a continuing need to improve usability and functionality due to the market’s and consumers’ rising expectations. At that point, worries start to surface.

I’ve encountered several consumers who are perplexed about which of the top front-end javascript frameworks would most effectively address their issues. Connect with Simform’s professionals to discuss and pick our frontend development services that meet your needs if you’re in the same predicament and want to find the finest web UI framework swiftly.

Here, we discuss a few of the top front-end frameworks for 2022. Here is our suggestion for those of you wondering what some of the well-known front end frameworks are.

The State of Best Frontend Frameworks
The graph below, which compares the use popularity of each framework identified as one of the top front-end frameworks for 2021, illustrates the relative popularity of each framework. We can observe that Angular and React have been in high demand since the years 2015–2016.

JQuery is something that has always been in demand. Because jQuery still works fantastically when you don’t need to employ large frameworks like Angular and Ember but require speedier development with little functionality, this is the reason.

In the part that follows, let’s examine how each framework defines itself in its current form and how we should choose one over the other for our future development needs.

Top Frontend Frameworks
React, Angular, and Vue are the most well-liked frontend frameworks among developers, according to The State of JavaScript 2019, making them the top three frontend frameworks of 2022 as well.

Let’s go into more depth about each of these. Emberjs and Svelte, however, have a unique situation. Svelte is a well-known framework that is still among the most recent frameworks, but developer communities have begun to take an interest in it. Emberjs is more powerful, but perhaps because of its traditional learning curve approach, not many developers have utilised it.

1 React

React, one of the most straightforward frameworks to learn, was created at Facebook to address problems with code maintainability brought on by the ongoing addition of functionality to the app. React is currently an open-source framework that stands out for the remarkable capabilities it provides thanks to its virtual Document Object Model (DOM). An excellent framework for people who need a reliable platform to manage large traffic and expect it.

As a technical consultant, I would suggest React for projects involving the development of PWAs and single-page web apps.

When to use React:

When creating user interfaces, React is particularly useful, especially when creating single-page apps. Since you can reuse the components, it is the most reliable frontend framework when you want to construct an interactive interface quickly.

When not to use React:

React isn’t the best choice if you don’t have any practical expertise with Javascript. Furthermore, the JSX learning curve is a little challenging for less experienced coders.

2 Angular

Without Angular, no list of the top front end development frameworks would be complete. The sole TypeScript-based framework on this list is Angular. Google created Angular, which was formally introduced in 2016, to fill the gap between the expanding needs of technology and tried-and-true ideas that produced results.

Angular is distinct from React thanks to its two-way data binding functionality. It indicates that the model and the view are synchronised in real-time, meaning that any change made to the model is immediately reflected in the view and vice versa.

Angular is ideal for your project whether it entails creating mobile or web apps! Additionally, you may utilise this framework to create progressive web apps and multi-page websites. Businesses like BMW, Xbox, Forbes, Blender, and others use Angular to deliver their apps.

Angular is more difficult to understand than React. Despite the abundance of documentation, it is difficult to read it since it is either too complicated or incomprehensible.

When to use Angular

Due to the usage of two-way data binding, Angular improves the efficiency of browser-based apps by quickly updating the contents. Using Angular is the ideal option for enterprise-based applications and dynamic web apps.

When to avoid using Angular

An all-inclusive frontend framework is Angular. You cannot utilise the resources that Angular offers if you wish to create apps with constrained scopes. Additionally, use a more compact framework with less complicated syntax when your team is smaller.

3 Vuejs

Vue is a clear and easy-to-use front-end framework that is now one of the most popular. It works well at simplifying the challenges that Angular developers encounter. It is less in size and offers two significant advantages — visible DOM and component-based. It has a two-way binding as well.

Vue is flexible and supports you in a variety of endeavours. It can easily manage both straightforward and dynamic operations, including developing online applications, mobile applications, and progressive web applications.

Despite being designed to address complexity and increase app speed, it is not particularly well-liked by industry titans. However, this framework is used by Xiaomi, Alibaba, 9gag, Reuters, and others. Despite less interest from Silicon Valley, Vue continues to gain momentum.

When to use:

Vuejs is advised for design structures with flexibility. It enables you to create anything from scratch and works well when creating enormous projects.

When to use:

Vuejs is not the way to go if you believe the support community will be there to address the difficulties. Additionally, as the framework has demonstrated issues with component stability, Vuejs is not ideal for building applications that require reliable components.

4 jQuery

One of the first frontend frameworks was jQuery, which was released in 2006. Its relevance even in the modern digital world, despite its debut date, is what makes it unique. In addition to providing simplicity and convenience of use, jQuery also reduces the need to write lengthy JavaScript scripts.

There is a sizable jQuery community for the solutions because to its long existence.

Fundamentally a library, jQuery enhances a website’s functionality and interaction by allowing for the manipulation of DOM and CSS.

Although we couldn’t create mobile apps using jQuery, new advancements in jQuery Mobile have broadened the usage possibilities. Additionally, this framework has included support for building native mobile applications using its HTML5-based UI system, jQuery Mobile. Additionally, jQuery is compatible with whatever browser you want to use and is browser-friendly.

when to use:

The creation of desktop-based JavaScript apps uses jQuery. The framework maintains quite short and straightforward code. In order to handle events and carry out animations, it is utilised.

When not to use:

It is not practical to utilise jQuery while creating a large-scale programme since it adds a lot of unnecessary javascript code, which makes your application hefty. The framework cannot compete with more powerful javascript facilitation, less code, and component reuse in newer frameworks.

5 Emberjs

Emberjs, which was created in 2011, is component-based and provides two-way data binding, much like Angular. It is made to easily meet the escalating demands of contemporary technology. With Emberjs, you can create intricate mobile and web apps while counting on its effective architecture to address issues.

One of Ember’s minor drawbacks is its steep learning curve. Because of its tight and traditional nature, the framework ends up being one of the hardest frameworks to master. The developer community is modest because the field is still underdeveloped and young. Anyone who has no restrictions on making time for studying can pursue it.

When to use:

Emberjs is the framework with all the technical frontend assistance, such as viewing a broad range of application states due to the good routing offered by Emberjs, if you want to design contemporary apps with a sophisticated user experience like Linkedin.

Because it offers a ready setup, practical binding, and custom properties to render the page as necessary, the framework stands as the comprehensive frontend solution for large-scale projects.

When not to use:

With a smaller development team, Emberjs isn’t the best option because the framework needs expertise and business logic to handle the complications. Emberjs could have a greater startup cost. Additionally, the framework might not be the best option for creating straightforward ajax operations and establishing a straightforward user interface.

6 Backbonejs

Backbonejs, one of the simplest frameworks available, enables you to create single-page apps quickly. A framework based on the MVC architecture is used. The MVC architecture’s View enables the development of component logic similarly to a Controller.

Additionally, this framework is capable of running engines like Moustache and underscore.js. To get the most out of the framework while creating Backbonejs-based apps, you may also leverage tools like Thorax, Marionette, Chaplin, Handlebars, and others.

The platform also enables you to create projects that call for several user kinds, with the arrays serving as a means of model differentiation. Therefore, whether you plan to use Backbonejs for the frontend or the backend, this is a great option because of its compatibility with REST API, which enables easy synchronisation between the two.

When to use:
Dynamic apps like Trello employ Backbonejs. It enables programmers to create client-side models, create quicker updates, and reuse code. As a result, it effectively manages updates on the fly, keeps the client up to date, and keeps everything in sync with the server.

When not to use:

Compared to other MVC client-side frameworks, Backbonejs has a more straightforward need for developing a web application. However, with the assistance of plugins and extensions, you may increase the features. Therefore, instead of striving for backbonejs, the development team should aim for a comprehensive solution in one framework.

7 Semantic-UI

Semantic-UI is a relative newcomer to the world of frameworks, but it is already well on its way to become one of the most widely used front-end frameworks worldwide. It is distinguished by its simple functioning and usefulness as well as its intuitive user interface. Because it uses regular language, the codes are self-explanatory.

It implies that newcomers who are relatively inexperienced in the world of coding may easily understand the framework. Additionally, it facilitates a more efficient development process due to the integration of several third-party libraries.

When to use:

A technology called Semantic-UI allows for a very lightweight user interface.

When not to use:

Semantic-UI isn’t advised if you have a team of novices who are less familiar with javascript because it necessitates the capacity to create adjustments in the programme without relying on the pre-made functions.

8 Foundation

Few frontend frameworks that were suitable even for novices have been seen thus far. With Foundation, though, things are very different. It was created by Zurb and is only appropriate for enterprise-level creation of responsive and agile websites. For beginners, utilising Foundation to start creating applications is advanced and difficult.

It includes fast mobile rendering capabilities, GPU acceleration for incredibly smooth animations, and data-interchange features that load light chunks for mobile devices and hefty sections for bigger devices. Working on independent projects will help you become more familiar with the Foundation’s structure and better prepare you to handle its intricacies if you want to begin using it. Mozilla, eBay, Microsoft, and more companies use it.

When to use

If you are looking for styled CSS components, open-source, and mobile-friendly front end framework, Foundation beats the other options.

When not to use

Not suitable for beginners since it is tough to modify the code and increases the complexity because of its customization capability.

9 Svelte

The most recent frontend framework is called Svelte. In contrast to frameworks like React and Vue, the framework has made a difference by moving the work into a compilation phase rather than the browser. It updates the document object model in sync with the application’s state by writing the code necessary to do so.

When to use:

The framework is best suitable for small app projects and with a small team. Because it doesn’t have a bigger support community, it is better not to use it for complex projects.

When not to use:

It is better not to use Svelte for bigger projects currently because the frameworks lack enough tooling and community. It is hard to find answers to the questions / bugs that may appear later in the development because of the small community.

Conclusion:
These are some of the top frontend frameworks I would suggest based on my experience creating everything from MVPs to large-scale projects. But I think you now know which framework to choose based on the requirements of your project.

You can be unsure about the technology because there are many frontend framework solutions available. Understanding them, gaining experience with each, and making a decision among them are not simple tasks.

When selecting a framework for a project that is created from scratch, I personally enjoy drawing on the knowledge of Simform’s frontend engineers. The nicest thing is that, even at the basic level, practically all frameworks can be picked up quickly. You should pick the frontend framework with the help of your most experienced frontend developer, who can weigh the advantages and disadvantages.

Frontend
Development
Developer
Front End Develo

Top 10 Mistakes to Avoid When Using React

certifieddev0101 — Sat, 12 Aug 2023 15:29:04 +0000

React has quickly become the most popular front-end framework in the tech world, used by big tech companies such as Facebook, Netflix, Airbnb, and many more. React developers are in high demand, and the demand continues to grow.

Today, we’ll explore the top 10 mistakes React developers make — and how to fix them.

We’ll cover:

Not creating enough components
Modifying the state directly
Passing a number as a string when passing props
Not using key on a listing component
Forgetting that setState is asynchronous
Using Redux too much
Creating and using God components
Not following the React folder structure
Sending props as strings (instead of numbers)
Forgetting to start a component name with a capital letter
What to learn next

Not creating enough components A common mistake that React developers make is that they don’t create enough components. With React, you’re able to create large components that execute many tasks, but it’s better to keep components small, with one component corresponding to one function. Not only does it save you time, but it also helps you with debugging since you know which components are associated with any errors that may arise.

Let’s take a look at an example of the TodoList component:

// ./components/TodoList.js

import React from 'react';

import { useTodoList } from '../hooks/useTodoList';
import { useQuery } from '../hooks/useQuery';
import TodoItem from './TodoItem';
import NewTodo from './NewTodo';

const TodoList = () => {
const { getQuery, setQuery } = useQuery();
const todos = useTodoList();
return (

{todos.map(({ id, title, completed }) => ( ))}

Highlight Query for incomplete items:
setQuery(e.target.value)} />

);
};

export default TodoList;

Modifying the state directly In React, the state should be immutable. If you modify the state directly, it’ll cause performance issues that are difficult to fix.

Let’s look at an example:

const modifyPetsList = (element, id) => {
petsList[id].checked = element.target.checked;
setPetsList(petsList);
};
You want to update the checked key of an object in an array based on the state of a checkbox, but you have a problem. React can’t observe and trigger re-rendering because the object is being changed with the same reference.

To fix this, you can either use the setState() method or the useState() hook. Either of these methods will ensure that your changes are acknowledged by React and your DOM is correctly re-rendered.

Let’s rewrite the previous example and use the useState() method.

Note: You could also use map() and spread syntax to avoid mutating other state values.

Passing a number as a string when passing props Passing a number as a string when passing props can lead to issues in a React program.

Let’s start with an example:

class Arrival extends React.Component {
render() {
return (

Hi! You arrived {this.props.position === 1 ? "first!" : "last!"} .

);
}
}
In this example, the component expects the position as a prop and declares that the position should be a number. Since you’re making a strict comparison, anything that’s not a number or not exactly equal to 1 would trigger the second expression and print “last!”.

To fix this, you should insert curly brackets around the input like this:

const element = ;

Not using key on a listing component Let’s say you need to render a list of items and your code looks something like this:

const lists = ['cat', 'dog', 'fish’];

render() {
return (

{listNo}

);
}
If you’re working with a smaller app, this could work. But when working with large lists, you’ll run into rendering problems when wanting to modify or delete an item from the list.

React tracks all of the list elements on the Document Object Model (DOM). React wouldn’t know what has changed in your list without this record.

To fix this, you need to add keys to all of your list elements. Keys give each element a unique identity, which helps React determine which items have been added, removed, modified, etc.

Here’s how to do this:

{listNo}

Forgetting that setState is asynchronous It’s easy to forget that the state in React is asynchronous. It’s something that even the most seasoned React developers forget.

Being asynchronous means that any modifications you make don’t take effect immediately (and may take effect on the next render). React automatically batches update calls to improve performance. If you access a state value right after setting it, you might not get the most accurate result.

Let’s look at an example:

handlePetsUpdate = (petCount) => {
this.setState({ petCount });
this.props.callback(this.state.petCount); // Old value
};
You can fix this by giving an optional second parameter to setState(), which will act as a callback function. The callback function will be called right after you update the state with your change.

handlePetsUpdate = (petCount) => {
this.setState({ petCount }, () => {
this.props.callback(this.state.petCount); // Updated value
});
};
Note: The same thing is true for useState(), except they don’t have a similar callback argument to setState(). Instead, you would use the useEffect() hook to get the same result.

Using Redux too much With bigger React apps, many developers use Redux to manage global state. While Redux is useful, you don’t need to use it to manage every state in your apps.

If you have an app that doesn’t have any parallel-level components that need to exchange information, you have no need to add an extra library to your project. It’s recommended to use a local state method or useState over Redux when you use a form component and want to check the state of a check button every time it’s accessed.

Creating and using God components
God components are monolithic and not reusable. They’re referred to as an “anti-pattern” in React. You shouldn’t build an entire page with all of your UI elements crammed into one component. You should instead take the time to outline the different interconnected parts of your app and make them into their own components. When you separate components this way, all parts of your app are easier to maintain and restructure when needed.
Not following the ReactJS folder structure
The projects you create aren’t just made for current development. They most likely will need to be maintained or manipulated in the future. The folder structure is very important when considering future possibilities for a project.

Let’s take a look at a standard folder structure followed by the ReactJS community:

Standard React JS Folder Structure
When navigating into any existing projects, it’s useful to have separate places for containers, assets, and components. It’s also useful to follow naming conventions to help with readability and organization. This helps you easily identify the purpose of any code written in your projects.

Sending props as strings (instead of numbers) React developers with experience writing a lot of HTML find it natural to write something like this:

This value prop will actually be sent to MyComponent as a string. If you do need it as a number, you can fix this issue by using something like the parseInt() function or inserting curly brackets instead of quotation marks.

Forgetting to start a component name with a capital letter Forgetting to start component names with capital letters is a small mistake that’s very easy to make. In JSX, a component that begins with a lowercase letter compiles down to an HTML element.

Let’s say you wrote something like this:

class demoComponentName extends React.Component {
}
This will cause an error that tells you that if you meant to render a React component, you need to start its name with an uppercase letter.

This mistake has an easy fix, which is starting component names with capital letters like this:

class DemoComponentName extends React.Component {
}
What to learn next
Now that we’ve explored the top ten mistakes React developers make, it’s time to start working with React and applying the skills you learned here today. React developers are in high demand, so adding React to your skillset is a wise career investment.

Some recommended concepts to work with next are:

Libraries in React
Initializing Firebase in React
App development with global state in React
Etc.
Happy learning!

6 ways to get data in React

certifieddev0101 — Thu, 10 Aug 2023 01:03:18 +0000

Data fetching is a core aspect of any React application. It is important for React developers to understand the different methods of data fetching and which use cases work best for them.

But first, let’s understand JavaScript Promises
Simply put, a promise is a JavaScript object that will yield a value sometime in the future. This usually applies to asynchronous operations (such as data fetching).

A promise has three states:

Pending: where the promise is still in progress
Fulfilled: where the promise resolves successfully and returns a value
Rejected: Promise failed with error
If a promise is fulfilled or rejected, it’s resolved . Promises have different methods to do different things depending on the result. These methods are discussed in more detail in the next section.

Method #1 — Using Promise Method Get API
The Fetch API provides a global fetch() method that enables developers to fetch data in a straightforward way. Prior to fetch(), the traditional approach was to use XMLHttpRequest(). (This method is not covered in this article because fetch() has been superseded by a more powerful and flexible feature set.)

The fetch() method takes one parameter, the URL to request, and returns a promise. The second optional parameter options is an array of attributes. The return value of fetch() can be JSON or XML (an array of objects or a single object). With no options argument, fetch() will always make a GET request.

The first method is what you’ll typically see in simple data fetching use cases, and is often the first result when browsing API documentation. As mentioned earlier, we fetch data from an API that returns a random image of a dog, and render that image on the screen. Before making the request, we wrap the code in a useEffecthook with an empty dependencies array so that fetch()the method is only run when the component is initially installed.

useEffect(() => {
fetch(URL)
// syntax for handling promises
.then((res) => {
// check to see if response is okay
if (res.ok) {
// if okay, take JSON and parse to JavaScript object
return res.json();
}
throw res;
})
// .json() returns a promise as well
.then((data) => {
console.log(data);
// setting response as the data state
setData(data);
})
// if res is not okay the res is thrown here for error
.catch((err) => {
console.error(Error: ${err});
// setting the error state
setError(err);
})
// regardless if promise resolves successfully or not we remove loading state
.finally(() => {
setLoading ( false );
});
}, []);
In , we call the method and pass in the URL of the API endpoint. In this method, we use the , , method of the promise object (recall that returns a promise). We use this method and pass in a callback function to check if the response is OK. If the response is OK, we take the returned JSON data and use the method to parse it into a JavaScript object. If the response is not normal, we will error.

Since the .json()method also returns a promise, we can chain another .then()and pass a function to set the state of the data, which is then used elsewhere in the component. In our example, the external API returns an object with a url property (which will be used as srcour image).

Continuing through the chain, the next part is .catch()to arrange for a function to be called when the promise is rejected. This also returns another promise, which we can then chain .finally()which will be called regardless of whether the promise is resolved (resolved or rejected). This .finally()approach allows us to avoid duplicating code in and .then(), .catch()making it a good place to remove loading state in our example.

Approach #2 — Libraries with Promise methods Axios
Axios is a popular HTTP client library for efficient data fetching. It can be easily installed into React applications via npm or other package managers. Using Axios is an alternative to the Fetch API, which has some advantages if you don’t mind installing external libraries.

The second example will be very close to the code of the first example, using the same promise method to handle the promise state and response. After fetch()importing the Axios library into our component, we can use axios.get()a method that can pass a URL to our external API endpoint instead. This returns a Promise, so we can take the same approach as Promise method chaining.

useEffect(() => {
axios.get(URL)
// syntax for handling promises
.then((res) => {
console.log(res.data);
// axios converts json to object for us (shortens our code)
setData(res.data);
})
// axios takes care of error handling for us instead of checking manually
.catch((err) => {
console.error(Error: ${err});
// setting the error state
setError(err);
})
// regardless if promise resolves successfully or not we remove loading state
.finally(() => {
setLoading ( false );
});
}, []);
The obvious difference between the code for the Fetch API and this Axios method is that with Axios we only need one, because Axios converts the .then()JSON to JavaScript objects for us (shortening our code). Also, we no longer write conditions to manually throw errors, because Axios will throw 400 and 500 range errors for you (shortening our code again).

Approach #3 — Asynchronous functions (async/await)
In this example, we’ll abandon the promise chaining we used in the previous two examples and instead introduce a more modern approach to writing asynchronous, promise-based code. This approach can be used with any fetching mechanism of your choice, but for this example we’ll stick with the Axios library.

The third example sets up the component in a similar fashion to the previous example by importing the Axios library and then wrapping the code for fetching the data in useEffecta with an empty dependencies array. In useEffect, we use the keyword to create an asynchronous function async, and then within that function we have three separate parts - try, catchand finally. This try/catch approach is used to handle errors in JavaScript. The code inside the block tryis executed first, if any errors are thrown, they will be "caught" in the block, catchand the inner code will be executed. Finally, the finallyblock will always be executed after the flow has passed the try/catch.

useEffect(() => {
// create async function b/c cannot use async in useEffect arg cb
const fetchData = async () => {
// with async/await use the try catch block syntax for handling
try {
// using await to make async code look sync and shorten
const res = await axios.get(URL);
setData(res.data);
} catch (err) {
console.error(Error: ${err});
// setting the error state
setError(err);
} finally {
setLoading ( false );
}
};

fetchData ();

}, []);
In this example, the try block creates a variable called res (short for response) that uses the async keyword. This allows the code to look synchronous (shorter and easier on the eyes). In this example, axios.get(URL) is “waiting” until it stabilizes. If the promise is fulfilled, then we set the data into the state. If the promise is rejected (throws an error), it goes into the catch block.

Method #4 — Create a “ useFetch" custom React Hook
The fourth approach is to create our own custom React hook, call useFetchit that can be reused in different components in our application, and remove the bulky fetching code from each component. This example is really just taking the fourth example (using the same techniques of the Axios library and async/await) and moving that code into its own custom hook.

To do this, we create a function called useFetch.js. Then we useEffectadd all the code from the previous example, along with the different states we're tracking, into the function useFetch. Finally, this function will return an object containing each state, which is then useFetchaccessed where the hook is called. Our useFetchhook will also accept one parameter, the URL , to allow for more reusability and the possibility to make fetch requests to different endpoints.

const useFetch = (url) => {
const [data, setData] = useState(null);
const [ loading , setLoading ] = useState ( true );
const [error, setError] = useState(null);

useEffect(() => {
// create async function b/c cannot use asyc in useEffect arg cb
const fetchData = async () => {
// with async/await use the try catch block syntax for handling
try {
// using await to make async code look sync and shorten
const res = await axios.get(url);
setData(res.data);
} catch (err) {
console.error(Error: ${err});
// setting the error state
setError(err);
} finally {
setLoading ( false );
}
};

fetchData ();

}, []);

return {
data,
loading,
error,
};
};
Finally, we import this new custom hook into the component that will use it, and call it like any other React hook. As you can see, this greatly helps with code readability and shortens our component.

The final point of this approach is that you can also install external libraries instead of creating your own custom hooks. A popular library react-fetch-hook has very similar functionality to the hook we just built.

Method #5 — React Querying the library
One of the most modern and powerful ways to fetch data in React is by using the React Query library. It has many features beyond simple data fetching, but for this example, we will learn how to simply fetch data from the same example external API.

Once installed and imported, React Query provides a number of custom hooks that can be reused across our components in a very clean way. In this example, we import QueryClient from and then wrap our application with a provider and pass the QueryClientProvider instance as a property to the wrapper. This enables us to use the library in our application.

To make this simple GET request, we import and use useQueryhooks. Unlike the previous example using a custom hook, we pass in two parameters. The first required parameter is queryKey , which is used as a reference key for this specific query. The second required parameter is queryFn , which is the function that the query will use to request data. We'll use this query function and then use the Fetch API and promise method syntax for the initial fetch instead of just passing a simple URL as in our previous custom hook example. ( This hook has many other optional parameters. )

const { isLoading, error, data } = useQuery("dogData", () => fetch(URL).then((res) => res.json()));
isLoadingFrom here, React Query will do all the extra work behind the scenes, in this case we can destructure , error, and from this hook call to use datain our application, although we can access many other values as well.

In a larger example than our current Dog Image API example, the power and advantages of using React Query are evident. Some additional features to mention include: caching, updating “stale” data in the background, and other performance-related benefits.

Method #6 — Redux Toolkit RTK Queries
The last method of this article is to use Redux Toolkit’s RTK Query for data acquisition. It’s very common for applications to use Redux for state management. If your company or your current side project is currently using Redux, a good option is to use RTK queries to fetch data, as it offers similar simplicity and benefits to React queries.

To start using RTK queries wherever your Redux code is stored, create a rtkQueryService.jsfile to set up data fetching. After creation, you add the service to your Redux store, and assuming you're already using Redux, you'll already have a store component that contains your application.

From here, it’s very similar to using custom hooks with React Query methods, you import and then use query hooks and deconstruct data, errorthen isLoadingbe able to use in your components.

const { data, error, isLoading } = useGetDogQuery();
As you can see, Redux has a lot of settings, so this might not be the best approach for our use case, but if you’re already using Redux in a React app and want a simple and modern way of getting data, RTK Query might be great Valuable this also provides benefits like caching.

final thoughts
If you get to this point, support you! The purpose of this article is to introduce some of the different data fetching methods for those learning React. This is a centralized place to compare with the same use case for better understanding. My goal is not to make a statement or go into details about the “best” approach.

Also, there are other current data fetching methods not mentioned here, and I’m sure others will emerge as the React ecosystem grows. That said, I believe this article provides a solid foundation for understanding the field. I hope you find this useful!

5 projects to master Front End Development

certifieddev0101 — Tue, 08 Aug 2023 15:00:28 +0000

If you are starting on the journey to becoming a Front End Developer, once you get the basics down, you might want to develop projects as the best way to learn any skill is to try creating something hands-on. This article is for anyone trying to take their skills to the next level, as well as for people who is at a loss for project ideas.

Here are five project ideas to help you out, according to no order.

Real-Time Chat App A Real-Time chat application sends and shows messages to a recipient instantly without any page refresh.

This is a very lucrative project to have in your portfolio as it showcases that you have experience working with real-time data as well as authentication. If you are a Full-Stack Developer, you might also want to create the backend for the application for some extra brownie points in the eyes of the person checking it out.

Demo

Web-app: https://smartsapp-ba40f.firebaseapp.com

GitHub - ruppysuppy/SmartsApp: 💬📱 An End to End Encrypted Cross Platform messenger app.
A fully cross-platform messenger app with End to End Encryption (E2EE). NOTE: The features shown in the demo is not…
github.com

E-Commerce Store E-commerce stores allow users to buy and sell goods or services using the internet and transfers money and data to execute these transactions.

This project also involves authentication as well as keeping track of a user’s previous orders, cart, etc. resulting in a complex project, which tells the viewer you can solve complex development problems.

Demo

Web-app: https://pizza-man-61510.web.app/

GitHub - ruppysuppy/Pizza-Man: 🍕🛒 An e-commerce website to order pizza online
An E-Commerce website for ordering Pizza Online NOTE: The features shown in the demo is not exhaustive. Only the core…
github.com

Weather Report App A Weather Report App provides the user with current weather details and forecasts as well for the future.

This project is probably the easiest one on the list. You only need to use a third-party API like Open Weather Map or Weather API. It shows the viewer that you can work with external APIs.

Demo

GitHub - ruppysuppy/The-WeatherMan-Project: 🌞☁️ Get Local and International weather forecasts from…
🌞☁️ Get Local and International weather forecasts from the most accurate Weather Forecasting Technology featuring up…
github.com

Cross-Platform App Cross-Platform Applications are apps developed to function on multiple Operating Systems from the same code base.

Being well adapted at Cross-Platform Development is highly in demand these days as companies want to reduce the cost involved in application development, and what’s a better way to do it than make an application once and use it on several platforms?

Demo

GitHub - ruppysuppy/UnHook: 💻👨‍💻 Cross Platform Desktop App to remind you to Unhook yourself…
If you are one of the rare breed of people who call themselves programmers, you must have faced the following sitation…
github.com

Personal Portfolio Since you just completed 4 projects mentioned above, you will definitely need a place to showoff how cool your projects are. Personal Portfolio is the go-to place to do just that, you can also list out your experience, achievements, and any other relevant information.

If you have a desire to build your personal brand, then a website that can promote your work is a must. This is just the place you can bring out your inner artist and design it to your heart’s content. Not an artistic person? Draw ideas from templates or simply use one.

3 Common Mistakes to Avoid When Handling Events in React

certifieddev0101 — Thu, 03 Aug 2023 13:09:46 +0000

In React apps, event listeners or observers perform certain actions when specific events occur. While it’s pretty easy to create event listeners in React, there are common pitfalls you need to avoid to prevent confusing errors. These mistakes are made most often by beginners, but it’s not rare for them to be the reason for one of your debugging sessions as a reasonably experienced developer.

In this article, we’ll be exploring some of these common mistakes, and what you should do instead.

Accessing state variables without dealing with updates Take a look at this simple React app. It’s essentially a basic stopwatch app, counting up indefinitely from zero.

JavaScript

import { useState, useEffect } from 'react';

export default function App() {
const [time, setTime] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setTime(time + 1);
}, 1000);
return () => {
window.clearInterval(timer);
}
}, []);
return (

Seconds: {time}

);
}
However, when we run this app, the results are not what we’d expect:

This happens because the time state variable being referred to by the setInterval() callback/closure refers to the stale state that was fresh at the time when the closure was defined.

The closure is only able to access the time variable in the first render (which had a value of 0) but can't access the new time value in subsequent renders. JavaScript closure remembers the variables from the place where it was defined.

The issue is also due to the fact that the setInterval() closure is defined only once in the component.

The time variable from the first render will always have a value of 0, as React doesn't mutate a state variable directly when setState is called, but instead creates a new variable containing the new state. So when the setInterval closure is called, it only ever updates the state to 1.

Here are some ways to avoid this mistake and prevent unexpected problems.

Pass function to setState One way to avoid this error is by passing a callback to the state updater function (setState) instead of passing a value directly. React will ensure that the callback always receives the most recent state, avoiding the need to access state variables that might contain old state. It will set the state to the value the callback returns.

Here’s how we apply this for our example:

JavaScript

import { useState, useEffect } from 'react';

export default function App() {
const [time, setTime] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
// 👇 Pass callback
setTime((prevTime) => prevTime + 1);
}, 1000);
return () => {
window.clearInterval(timer);
}
}, []);
return (

Seconds: {time}

);
}

Now the time state will be incremented by 1 every time the setInterval() callback runs, just like it's supposed to.

Event listener re-registration Another solution is to re-register the event listener with a new callback every time the state is changed, so the callback always accesses the fresh state from the enclosing scope.

We do this by passing the state variable to useEffect's dependencies array:

JavaScript

import { useState, useEffect } from 'react';

export default function App() {
const [time, setTime] = useState(0);

useEffect(() => {
const timer = setInterval(() => {
setTime(time + 1);
}, 1000);

return () => {
  window.clearInterval(timer);
}

}, [time]);

return (

Seconds: {time}

);
}
Every time the time state is changed, a new callback accessing the fresh state is registered with setInterval(). setTime() is called with the latest time state added to 1, which increments the state value.

Registering event handler multiple times This is a mistake frequently made by developers new to React hooks and functional components. Without a basic understanding of the re-rendering process in React, you might try to register event listeners like this:

JavaScript

import { useState } from 'react';

export default function App() {
const [time, setTime] = useState(0);

setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 1000);

return (

Seconds: {time}

);
}
Or you might put it in a useEffect hook like this:

JavaScript

import { useState } from 'react';

export default function App() {
const [time, setTime] = useState(0);

useEffect(() => {
setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 1000);
});

return (

Seconds: {time}

);
}
If you do have a basic understanding of this, you should be able to already guess what this will lead to on the web page.

What’s happening?

What’s happening is that in a functional component, code outside hooks, and outside the returned JSX markup is executed every time the component re-renders.

Here’s a basic breakdown of what happens in a timeline:

1st render: listener 1 registered
1 second after listener 1 registration: time state updated, causing another re-render)
2nd render: listener 2 registered.
Listener 1 never got de-registered after the re-render, so…
1 second after last listener 1 call: state updated
3rd render: listener 3 registered.
Listener 2 never got de-registered after the re-render, so…
1 second after listener 2 registration: state updated
4th render: listener 4 registered.
1 second after last listener 1 call: state updated
5th render: listener 5 registered.
1 second after last listener 2 call: state updated
6th render: listener 6 registered.
Listener 3 never got de-registered after the re-render, so…
1 second after listener 3 registration: state updated.
7th render: listener 7 registered…
Eventually, things spiral out of control as hundreds and then thousands (and then millions) of callbacks are created, each running at different times within the span of a second, incrementing the time by 1.

The fix for this is already in the first example in this article — put the event listener in the useEffect hook, and make sure to pass an empty dependencies array ([]) as the second argument.

JavaScript

import { useEffect, useState } from 'react';

export default function App() {
const [time, setTime] = useState(0);

useEffect(() => {
setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 1000);
}, []);

return (

Seconds: {time}

);
}
useEffect runs after the first render and whenever any of the values in its dependencies array change, so passing an empty array makes it run only on the first render.

The time increases steadily now, but as you can see in the demo, it goes up by 2 seconds, instead of 1 second in our very first example. This is because in React 18 strict mode, all components mount, unmount, then mount again. so useEffect runs twice even with an empty dependencies array, creating two listeners that update the time by 1 every second.

We can fix this issue by turning off strict mode, but we’ll see a much better way to do so in the next section.

Not unregistering event handler on component unmount. What happened here was a memory leak. We should have ensured that any created event listener is unregistered when the component unmounts. So when React 18 strict mode does the compulsory unmounting of the component, the first interval listener is unregistered before the second listener is registered when the component mounts again. Only the second listener will be left and the time will be updated correctly every second — by 1.

You can perform an action when the component unmounts by placing in the function useEffect optionally returns. So we use clearInterval to unregister the interval listener there.

JavaScript

import { useEffect, useState } from 'react';

export default function App() {
const [time, setTime] = useState(0);
useEffect(() => {
console.log('here');
const timer = setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 1000);
// 👇 Unregister interval listener
return () => {
clearInterval(timer);
}
}, []);
return (

Seconds: {time}

);
}
useEffect's cleanup function runs after every re-render, not only when the component unmounts. This prevents memory leaks that happen when an observable prop changes value without the observers in the component unsubscribing from the previous observable value.

Conclusion
Creating event listeners in React is pretty straightforward, you just need to be aware of these caveats, so you avoid unexpected errors and frustrating debugging spells. Avoid accessing stale state variables, don’t register more event listeners than required, and always unregister the event listener when the component unmounts.

2023 Fastest Roadmap for ReactJS Junior Level - With Preparation Links

certifieddev0101 — Thu, 03 Aug 2023 13:07:12 +0000

Frontend Roadmap with links to tutorials, practices and certificates.

Photo by Lautaro Andreani on Unsplash
Ihave gone through many roadmaps online and here is my list to become a frontend engineer as fast as possible. Sit tight and let’s start.

Before we start
Best Websites to learn from:

Youtube: all free.
Udemy: pay for everything, learn better.
Coursera: certified.
Egghead: simple explanation.
Medium: read articles on different topics.
IDE: VSCode

Learning Technique: Pomodoro. You can install the Focus To-Do app on your phone, computer or Chrome as an extension.

HTML and CSS
These are essential technologies for every prospective developer to understand how you can build something using your computer.

General knowledge: HTML in 100 Seconds, CSS in 100 Seconds
Detailed: HTML & CSS Crash Course, HTML Crash Course by Mosh Hamedani
Also, use w3schools.com to read about the common CSS and HTML features.

The most important HTML tags: html, head, body, style, script, link, meta, base, div, h1-h6, p, span, i, b, hr, ul-ol, li, table (thead, tbody etc.), a, button, input (label), form, select (option), textarea, img, video .
Should-be-known tags: iframe, header, main, aside, article, footer, nav, section, hr, br, map, svg, canvas, noscript, strong, audio .
The most important CSS concepts: flex, grid, specificity, box model, margin-padding-border, Responsivity( @media queries), position, display (block, inline, inline-block), advanced selectors (pseudo element, pseudo class etc.), CSS optimizationHave a look at the link for all important concepts.
Warm up your knowledge with games:
Flexbox Froggy
Grid Garden
CSS Diner
CSS Battle
You can also write some responsive components like navigation, dropdown, card, form, circular loader, sidebar etc (Example snippets). Have a look at w3schools exercises
Learn how to write readable code
Towrite readable code, we must follow community best practices. SASS, BEM standard and Bootstrap 5 come to rescue us from writing unreadable code. They are easy to learn and even easier to work with.

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”

― Martin Fowler

SASS: Sass in 100 seconds, Complete SASS tutorial,
BEM: By using the BEM standard you won't need to use complicated CSS selectors and your code will be faster to run. BEM in 6 mins, You Probably Need BEM CSS in Your Life (Tutorial).
Bootstrap 5: It helps to write components faster and makes them readable. Bootstrap 5 tutorial
Code something
Use one of the 45 Figma Landing Pages and code it using the technologies mentioned above. Figma is a UI designing app and its usage is more common than others.

PS.: Don’t forget to create a Figma account to access the built-in tools. See the image below:

Learn Git
Here you have coded a landing page. So you need to push it to your GitHub account. Create one and choose a distinctive username. Mine is nagibaba .

Git in 100 seconds, Git and GitHub in 12 mins.

Most important git commands: init, add, commit, push, pull, merge, checkout, status, log . These will be enough for a beginner. You can enhance your knowledge later.

Javascript
Weneed to focus on ES6 (ES 2015) for modern React development. In addition to ES6, it is crucial to understand the differences with ES5 (Old Javascript). Most browsers understand ES6. If not, modern development systems automatically compile ES6 and later versions to ES5 using Babel. So we don’t need to get into hassle with that process.

JS in 100 seconds,
Modern Javascript tutorial,
Learn by reading, Javascript.info from basics to advanced (I prefer this).
Javascript from beginner to expert (explains the differences between ES5 and old JS syntax together)
FreeCodeCamp: Basic Javascript, ES6, Functional Programming
Practice by coding online: https://learnjavascript.online/
Important concepts: Event loop (microtask, macrotask, queue, stack, web API), context, arrow function, closure and currying, hoisting, data types, variable types (var, let, const), strict mode, value vs reference, type coercion, DOM manipulation, destructuring and spread operator, call-apply-bind functions, Array manipulation, pure functions, higher-order functions, promises, scope, IIEF, == vs ===, mutability, lazy loading.

Tip: The interviewer will most probably ask about synchronous and asynchronous functions and their order of execution.

console.log(1)
setTimeout(()=>console.log(2), 0)
const promise1 = new Promise((resolve, reject) => {
console.log(3)
resolve(4)
})

promise1.then(res => {
console.log(res)
})
console.log(5)

// 1, 3, 5, 4, 2
Link: Promises

Data Structures
This part is a little hard for beginner-level developers. Just try to understand the concepts. You will comprehend their importance after coming across some real-life examples.

If these seem difficult to you, feel free to jump right into the next section — React JS. But remember to return to this phase afterwards.

Should learn: Array, Linked List, Stack, Queue, Hash Table, Tree.
Tutorials: 8 Common Data Structures, Data Structures you must know, Hackerrank Data Structures, Basic Data Structures, FreeCodeCamp Basic Algorithm Scripting
Algorithms
Focus on easy Array and String algorithms more. Hackerrank algorithms. The more you solve, the better you’ll get.

You can find solutions and tutorials for the specific algorithm on Youtube by searching its name.

React
Install NodeJS to your computer.

Understand how React works, write an app (I will give a hint about that at the end) and prepare for the interviews.

Learn Modern React
Kent C. Dodds's introduction
React in 30 mins
Get certified:

React-101
Meta Front-End Developer Professional Certificate
React Basics Certificate
Important concepts: States and Props, hooks vs LifeCycle Methods, prop drilling, Higher-order Components (HOCs), Virtual DOM (reconciliation), pure components, conditional rendering, JSX, Webpack.

State management: Redux, MobX or Recoil
React uses Context API to share the state between components. But it is the default built-in functionality and not that popular due to its lack of scalability. I have written an article about that.

Redux is more popular and a bit hard to use. It is a library inspired by Flux architecture. I prefer Recoil. Choose one and learn its depths.

Those tools also need asynchronous functions to make server requests and share them between components. I have used Redux with Saga, but now I use Recoil with React-Query most of the time.

You should learn Redux to get more chances to pass the interview.

Popularity graph

Tutorials:

Redux: Redux in 100 seconds, Redux from scratch

Recoil: In 10 mins, in 2 minutes.

MobX: Search Youtube.

Testing
Wetest our components and functions in case they might break with changes done in the future. Components are tested directly by unit tests and their communication by integration tests.

Tutorial: React testing library

UI
Choose one: Tailwind, Styled Components or MaterialUI are the most popular ones. I prefer Tailwind.

If you have already learned Bootstrap, you’ll easily adapt to Tailwind.

Backend mock.
Choose one: JSON Placeholder and Connect API Mocker are for creating mock (fake) API endpoints.

Firebase and NodeJS are also useful if you want real data or a WebSocket connection.

Typescript
Asa junior dev, you won’t need to learn the depths. If you gain some general knowledge, you’ll have more chances to land the first development job.

Tutorials: General knowledge, React Typescript

Write an app
This part is the most important one. You can choose to create a blog, to-do, personal website or any of your idea. It should be small and easy to write.

Tech stack I recommend using (from easier to more advanced):
React Query, Recoil, normal CSS, Axios, React Hook Form, JSON placeholder.

React Router, Redux, Redux-Saga, SASS or Tailwind, Connect API Mocker.
Typescript, React Query, Styled Components or MaterialUI, Firebase.

Interview Preparation
Prepare as much as you can. As I stated before, the more you learn, the more chance you’ll have to pass the exam.

It is a general practice in front-end interviews to ask for pure Javascript features and easy algorithms.

So try to focus on Javascript.

Frontend Interview Handbook (Trivia)
ReactJS interview questions
Important JS concepts
Javascript.info
Javascript Visualizer
Practice:
Dev.to preparation Materials
Hooks cheatsheet
Also, prepare an introduction about yourself before the interview.

Use Google a lot
You can find almost everything needed for the interviews. Enhance your searching abilities.

“How … works”, “How to prepare for …”.
Tips, Cheatsheet, tricks: “git cheatsheet”, “Interview tips for JS”, “CV tricks” etc.
“Top [react, javascript, HTML etc.] interview questions”.
“What is …”.
“Best practice for …”.
If there is any bug or error you can’t solve on your own (Which is a great possibility), copy+paste it on Google and find the best answer on StackOverflow

Create a competitive CV
The first impression is the most important part of an interview. There will be thousands of applications for a junior role, so become more visible by following the best practices.

In this link, there are sample resumes of employees that got hired by top companies.

Conclusion
Asa junior developer, the hardest part of the business is finding the first job. What can be done?

Participate in freelance projects.
Apply for intern positions.
Enhance your professional connections.
Open a Linkedin account.
Prepare for the interviews.
Create a cover letter.
Support open-source projects.
Get certificates.
Read Medium articles daily
Search Google a lot for tips. “How to land the first dev job”, “How to prepare for the interview”, “How to find frontend intern job” etc.
I wish this article will be helpful.

9 Tips for Writing Clean, Fast, And Maintainable React Code

certifieddev0101 — Fri, 28 Jul 2023 15:45:47 +0000

React Components In Code Editor
Make Your Work Clean, Fast, and Easy to-Maintain.
I know — this is every programmer’s goal (or at least I hope it is).

And, in my opinion, this skill separates a good programmer from a superb programmer.

The best part is that it is never truly finished because there is always something new to learn and improve on.

Following these tips can make things simpler not just for you, but also for your teammates.

I’ve seen development teams develop a style guide in which they set key principles for how they write code.

If you ask me, it’s a brilliant concept.

Among them were:

make advantage of functional components (like arrow functions)
Inline styles should not be used.
keep a good import structure (third-party imports first, next internal imports)
Before committing your code, format it.
And the like.

Of course, you could go into considerable detail about it. This is decided by your team.

Personally, I hate detailed style guides because I believe that as a skilled developer, you should have some degree of freedom and should not be overly limited.

However, a style guide in general is a smart way to outline and promote the best tips while also verifying that your team is on the same page in some key areas.

This, I find, greatly improves teamwork and productivity.

Let’s look at what those best tips are for creating clean, highly functional, and maintainable components.

Make yourself comfortable, get something to take notes with, and have fun!

Create an effective folder structure.
Effective Folder Structure In Code Editor
Always Try To Maintain Folder Structure
Maintainability and flexibility need you to structure your files and directories within your React application.

A proper folder structure is based on the complexity of your app and the size of your team.

As a result, there is no ultimate solution.

Especially since this is a widely controversial point that also depends on personal tastes.

However, some best tips for different software sizes have been developed over time.

This outstanding blog post covers 5 different app sizes and offers helpful suggestions for organizing your files and folders.

Keeping this in mind as you prepare or start your app might have a major impact in the long run.

Really shouldn’t, but do your best to keep a clear structure that is fit for your current application and team size.

Maintain a structured import order
React Illustration
Put Import Order in Manner
If you’ve worked with React before, you’ve probably seen files that are bloated with a lot of import statements.

They could also be mixed up with third-party package external imports and internal imports such as other components, util functions, styles, and many more.

Example from the Real World (cut):

Standard Version Of Import Order
This is an example of a normal import order.
You’re undoubtedly aware of what’s happening here.

It’s difficult to distinguish the difference between third-party and local (internal) imports.

They are not organized and seem to be distributed.

Improved Version:

Improved Version Of Import Order
This is an example of an improved version of the import order.
The structure is smoother, and it is much simpler to distinguish between external and internal imports.

Of course, you can improve it by using more named imports (if that’s possible! :)).

This allows you to import all of the components from material-ui on a single line.

Other developers, I’ve seen, like to break the import structure into three sections:

Internal → External (third-party node modules) → Built-in (like react).

You can do it yourself every time or hire a linter.

Here’s an excellent post on tweaking your linter for your React project to guarantee proper import structure.

Explore higher-level component patterns.
Component Pattern Including Three Components
An Effective Component Pattern
Learning new component patterns as you gain experience with React is important to avoiding unmaintainable and unscalable mess code.

But that’s not all.

Understanding the various patterns is an excellent starting point.

But the most important aspect is that you understand when to use which pattern for which situation.

Every pattern has a specific purpose.

For example, the compound component pattern avoids needless prop-drilling of many component levels.

So, the next time you pass props via five component levels to better than theirs the component that is interested in the props, you start organizing the components differently.

I’ll make a little comment about props drilling because I’ve had many discussions about it in the past.

There are many varying opinions on whether it is good or bad.

If I start passing props via more than two component levels, I try to think of a better way/pattern.

The truth increases your development efficiency and makes the components you design more robust and flexible.

Having such patterns in your toolset separates you from other React developers.

I strongly advise you to do your research, but this Udemy course was quite useful to me.

Use a linter and follow its guides.
Linter Features in Code Editor
How Linter Helps You In Code Editor
A linter can help you with more than just maintaining your dependencies in a unique import order.

It usually helps you create better code.

ESLint is fully set when you use create-react-app, but you can also create it completely on your own or extend the rules of a which were before the rule.

A linter examines the JavaScript code you’re writing and warns you of mistakes that you’d more likely see if you run the code.

It took some time for me to understand the use of a linter, but now I can’t imagine working without one.

It’s one thing to have the linter, but it’s entirely different to follow its guidelines.

Of course, you can turn it off. Either for a certain line of code or the whole file.

There could be situations when this makes sense, but in my experience, they are extremely rare.

Another major benefit is the ability to adjust style checkers. This is very useful for teams.

You can easily combine ESLint with something like JSPrettify if you’ve agreed on some guidelines for how you write your code and how it should be structured.

Put your code to the test.
An Laptop Testing Code
Test Your Code In Every Routine Day
I understand that testing is probably not your favorite activity as a developer.

That was how I used to be.

At first, it seemed to be a useless and painful activity.

This might be true in the short run. But, in the long run — especially as the application expands — it is important.

Testing has become a routine for me that guarantees I’m performing my job properly and delivering higher-quality code.

There is nothing wrong with manual testing by humans, and it should not be avoided entirely.

However, say you are integrating a new feature and want to verify that nothing is broken.

This can be a time-consuming and error-prone activity.

You’re already thinking about how to structure your code to pass this test while you’re developing tests.

This is usually useful for me since I can predict future problems and keep a look out for them.

You’re not going right into creating code (which I wouldn’t recommend), but you’re thinking about the ultimate goal first.

As an example, “What should that specific component do? What important edge cases could arise that I must test? Can I clean the component such that it just serves one purpose? …”

Having a vision for the code you’re going to create can also help you stay focused on serving that vision.

Tests can also act as documentation in the sense that they can help a new developer who is new to the codebase understand the various elements of the product and how they are supposed to work.

So, don’t try to stay away from testing because it seems to be more work.

When configured correctly, it can save you time and effort in the future.

Explore the “Testing” section in the React Docs, watch a few tutorials on testing in React, and simply begin writing your first small TDD application or adding tests to an app you’re currently working on.

Typescript should be used (or use default props & proptypes)
TypeScript Banner
You should start using typescript or, at the minimum, the default props and prop types.
I remember my first React project as a software developer when our team was given a project that had previously been created in its entirety by another company.

Then we had to build the client’s project on top of it, and Typescript was already built in.

My teammates and I had no prior experience with TypeScript because we all came from a vanilla JavaScript background.

After a few weeks of working on that project, we decided that TypeScript was not an advantage, but rather a burden to our workflow.

We were also not getting the full benefits because we defined everything with type any to suppress Typescript warnings.

As a result, we decided to remove TypeScript from the project and stick to our tried-and-true vanilla JavaScript.

This worked smoothly at first, but as our project got more complicated, more errors appeared.

So we doubted our choice to quit TypeScript fully.

But such situations do happen and provide us with important experiences for the future.

This scenario inspired me to review TypeScript, which I studied in my spare time.

I can’t imagine my life without it now that I’ve built some side projects using it.

TypeScript has many advantages, like static type checking, better code completion in your IDE (IntelliSense), a better developer experience, and catching type errors as you write code — only to mention a few.

On the other side, it might offer some difficulties, because if you don’t come from a background with tightly typed languages (such as Java or C#), it could be difficult to understand at first.

But I can tell that learning and applying it is well worth the effort.

Here’s a good article that will provide you with an overview of the advantages and disadvantages of using Typescript in React apps.

And here’s a guide on writing TypeScript code for your React apps.

There may be reasons why you do not want to use TypeScript in your React project.

Make use of lazy loading & code splitting.
An Code Editor
Lazy Loading & Code Splitting is very useful in the workflow.
If you’ve spent any time in the JavaScript and React world, you’ve most likely come across the concept of bundling.

For those of you hearing this word for the first time, here’s what the official React documentation says:

Most React projects will use tools like Webpack, Rollup, or Browserify to “bundle” their files.

Bundling is the process of following imported files and joining them into a single file: a “bundle”.

This bundle can then be linked to a webpage to load the full app at once.

Basically, this is a fantastic strategy, but when your app expands, it will cause a problem.

Your bundle starts to grow as well.

Especially when using large third-party libraries such as three.js.

The disadvantage is that this bundle must always be loaded fully, even if the user just requires a section of the code.

This produces performance issues since your app can take an extra long time to load.

To avoid this, use a method known as code splitting, which separates your bundle into the pieces of code your user need.

The most popular bundlers, such as Webpack, Rollup, and Browserify, enable this.

The fact that you can build different bundles and load them dynamically is a huge advantage.

To clarify, say you’re heading to the grocery shop and only want bananas, apples, and bread.

In that case, you are not buying the entire shop and then selecting your bananas, apples, and bread from that too.

You’re only interested in a slice of the range. So, why would you buy everything?

It would take much longer and would be much more expensive.

I believe it is important to be aware of the potential issues which may arise as your app expands, and that there are ways available to address such concerns.

Check out the React documentation for more information.

Organize reusable logic into custom hooks
React Hook
Create your custom hooks
According to the React documentation,

Hooks let us reuse stateful code without having to change our forming.

Essentially, they are a superior answer to the methods that were previously used in combination with class components.

You might remember using Higher Order Components or render properties if you’ve been coding for a while.

When you need to reuse the same stateful logic that is already in use in another functional component, it’s a wonderful opportunity to develop a custom hook.

You wrap the logic within it and only need to call the hook as a function within your components.

Let’s look at a quick example where we need to change our UI based on screen size and want to keep track of the current window size while manually resizing the browser window.

const ScreenDimensions = () => {
const [windowSize, setWindowSize] = useState({
width: undefined,
height: undefined,
});

useEffect(() => {
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
window.addEventListener('resize', handleResize);
handleResize();
return () => window.removeEventListener('resize', handleResize);
}, []);

return (
<>

Current screen width: {windowSize.width}

Current screen height: {windowSize.height}

</>
)
}
As you can see, the solution is pretty straightforward and there’s nothing wrong with defining it like this.

Now comes the tricky part.

Imagine we’d like to use the exact logic in another component, where we’ll render a different UI (one for smartphones and one for desktops) based on the current screen size.

Of course, we could just copy the logic, paste it in and we’re done.

But this is not a good tip, as you might know from the DRY principle.

If we’d like to adjust our logic, we have to do it in both components.

And when we paste our logic into even more components, it becomes less maintainable and more error-prone.

So, what would you normally do in a vanilla JavaScript project?

You’d most likely define a function that encapsulates the logic and can be used in many different places.

That’s exactly what we’ll achieve with hooks.

They are nothing more than JavaScript functions but with some React specialties because they’re using React hooks.

So, in a typical JavaScript project, what would you do?

Most likely, you’d build a function that encapsulates the logic and can be used in a variety of ways.

That is exactly what we will do using hooks.

They are nothing more than JavaScript functions with some React brilliance thanks to the use of React hooks.

Let’s have a look at our unique hook:

const useWindowSize = () => {
const [windowSize, setWindowSize] = useState({
width: undefined,
height: undefined,
});

return windowSize;
}
Let’s just name it that inside our ScreenDimensions component:

const ScreenDimensions = () => {
const windowSize = useWindowSize()

return (
<>

Current screen width: {windowSize.width}

Current screen height: {windowSize.height}

</>
)
}
This lets us simply call the custom hook from any other component and save the return value (the current window size) in a variable that we can use inside the component.

const ResponsiveView = () => {
const windowSize = useWindowSize()

return (
<>
{windowSize.width <= 960 ? (

) : (

)}
</>
)
}
Handle errors correctly.
Errors on desk in front of man
Try to handle errors as best you can (It Time Saving)
Many developers ignore and underestimate the importance of error handling.

This seems to be a mistake from the start, as with many other best tips.

You want the code to work and don’t want to “waste” time thinking about errors.

However, as you gain experience and see situations where better error handling could have saved you a lot of energy (and valuable time), you know that having solid error handling inside your app is important in the long run.

Especially when the application is in service.

But what does error handling mean in the React world? There are a few parts that have a role.

One is to catch errors, another is to handle the UI properly, and the last is to properly report them.

Final words
That was a lot of fun, wasn’t it?

I tried my hardest to get everything out of my thoughts that had been collected over time.

My goal in writing this post is to share my experience with you to help you avoid some challenging times during your React learning and progress.

Of course, there may be great tips that you think are more important than I have missed. That’s awesome.

I’d love to hear anything you think should be added to this post.

Remember that it is always about changing what is useful to you.

So, don’t take things for granted, and think about what can be useful in your situation.

Then just add it to your list of best tips.

You can also follow me on Medium.

I’m always ready to help you and welcome any comments you can offer me.

So definitely don’t hesitate to speak with me.

“Top Frontend Interview Questions : (Part 1) — Boost Your Knowledge and Ace Your Next Job Interview!”

certifieddev0101 — Thu, 27 Jul 2023 09:07:26 +0000

Hey there! Are you excited about your upcoming job interview in the field of frontend development? and so am I! And I’ve got some exciting news for you — I’m also preparing for interviews, and I’ll be sharing all the interview questions I learn each day with you! This way, we can both learn together and be better prepared for our interviews.

Now, I know that preparing for interviews can be a bit daunting, but don’t worry — we’ll make it easy. We’ll break down each question into simple terms that anyone can understand, and we’ll have a blast doing it. So what are we waiting for, let’s get started!

What are the Semantic elements in HTML : Semantic elements in HTML are simply tags that have meaningful names which tells about what type of content it stores. For example header, footer, table, nav, … etc. HTML5 introduces many semantic elements which make the code easier to write and understand for the developer as well as instructs the browser on how to treat them.
Difference between position relative and position absolute : Relative Position : For relative-positioned elements, the origin is their original position in the normal flow of the document. If you apply top: 10px to it, it will move 10px down from it's original position, not affecting the normal flow of the document. Absolute Position : However, for absolute-positioned elements, the origin is it’s first parent which has a relative,absolute,or fixed position. If you apply top: 10px to it, it will move 10px down from it's parent's top. So it goes out of the normal document flow, affecting the other elements' location. Fixed Position : position: fixed; property applied to an element will cause it to always stay in the same place even if the page is scrolled. To position the element we use top, right, bottom, left properties.

relative vs absolute positioning

What is flexbox : CSS Flexbox is a one dimentional CSS layout module that is used to arrange and organize items on web pages in one direction, i.e., horizontally and vertically (row or column) and control how they stretch, shrink, or wrap. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.\
What is Box-model in CSS : In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of : margins, borders, padding, and the actual content. The content is what’s inside the box, like text or an image. The padding is the space between the content and the border. The border is the line that surrounds the box, and the margin is the space between the border and other elements on the page. CSS Box Model CSS Box Model
What is Event Loop : The Event Loop is a key concept in JavaScript that helps with handling asynchronous code. In simple terms, it’s a loop that constantly checks if any code needs to be executed, and if so, it executes that code. Here’s how it works: when you run a piece of code that takes some time to complete, like fetching data from a server or waiting for a user’s input, JavaScript doesn’t just stop and wait for that code to finish. Instead, it moves on to the next line of code, and checks back later to see if the previous code has finished executing. This checking process is done by the Event Loop. It constantly checks the queue of tasks that need to be executed, and when it finds one, it puts it in the Call Stack, which is a data structure that keeps track of all the code being executed. The Call Stack then executes that code, and once it’s done, it removes it from the stack and moves on to the next task. In summary, the Event Loop is what allows JavaScript to handle asynchronous code by constantly checking for tasks that need to be executed, and executing them in the right order.

Now, within the event loop, there are two types of tasks — microtasks and macrotasks. Microtasks are small, high-priority tasks that need to be executed immediately. Examples of microtasks include promise callbacks, mutation observers, and queueMicrotask(). While macrotasks are larger, lower-priority tasks that can be executed later. These tasks include things like setTimeout(), setInterval(), and requestAnimationFrame(). Understanding the difference between these two types of tasks is important for writing efficient, performant JavaScript code.

What is DOM : The Document Object Model, or DOM for short, is like a tree structure that represents the content of a webpage in code. This structure includes all the elements, like headings and paragraphs, and allows developers to access and modify them using JavaScript. The DOM helps to create dynamic and interactive webpages without having to reload the entire page. Think of it as a way for developers to talk to a webpage and make changes to it in real-time.
What is Hoisting in JavaScript : Hoisting is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting error and this is happening due to the 1st phase (memory creation phase) of the Execution Context. The execution context gets created in two phase, so even before code execution, memory is created so in case of variable, it will be initialized as undefined while in case of function the whole function code is placed in the memory.
What is Closures : Function bundled along with it’s lexical scope is closure. JavaScript has a lexical scope environment. If a function needs to access a variable, it first goes to its local memory. When it does not find it there, it goes to the memory of its lexical parent. See Below code, Over here function y along with its lexical scope i.e. (function x) would be called a closure. A closure is a function that has access to its outer function scope even after the function has returned. Meaning, A closure can remember and access variables and arguments reference of its outer function even after the function has returned. See Below code, Over here function y along with its lexical scope i.e. (function x) would be called a closure. function x() { var a = 7; function y() { console.log(a); } return y; } var z = x(); console.log(z); // value of z is entire code of function y. In above code, When y is returned, not only is the function returned but the entire closure (fun y + its lexical scope) is returned and put inside z. So when z is used somewhere else in program, it still remembers var a inside x().
What is Callback Hell : Callback Hell is a situation that can occur in JavaScript programming when there are too many nested callbacks. It can happen when you have to execute multiple asynchronous functions one after another and each function depends on the result of the previous function. To avoid Callback Hell, we can use promises, async/await, or other techniques to make the code more readable and manageable.
Difference between map, filter and reduce : Map, filter & reducer are Higher Order Functions. Map: The map function takes an array and creates a new array with each element transformed based on a function provided. For example, if you had an array of numbers, you could use map to create a new array with each number multiplied by 2. Filter: The filter function takes an array and creates a new array with only the elements that pass a test based on a function provided. For example, if you had an array of numbers, you could use filter to create a new array with only the even numbers. Reduce: The reduce function takes an array and returns a single value by performing a specified operation on each element of the array. For example, if you had an array of numbers, you could use reduce to find the sum of all the numbers in the array.

Roadmap for ReactJS Developers in 2023 | Zero to Hero

certifieddev0101 — Wed, 26 Jul 2023 17:18:29 +0000

Here is a roadmap that will take you from zero to hero as a React developer in 2023, whether you’re just getting started or looking to advance your abilities:

Learn the fundamentals of JavaScript

As JavaScript is the foundation of React, having a firm grasp of its principles is crucial. Start by studying objects, loops, conditionals, functions, and variables.

Learn the basics of HTML and CSS

The foundational languages of web development are HTML and CSS. To design HTML elements, style them, and leverage CSS frameworks like Bootstrap or Material UI, you should understand how to do all of these things.

Learn React basics

Learn the fundamentals of React first, such as components, props, state, and JSX. Online courses, YouTube tutorials, or React documentation are good places to start.

Top Marketplace For Buying Source Code, Pre-built Websites For Sale
Codemarketi is a new platform available for buying source code. Get an industry-specific website, prebuilt for you! Get…
www.codemarketi.com

Dive deeper into React concepts

Learn more about advanced React ideas like React Router, Redux, React Hooks, Context API, and Server-Side Rendering after you’ve mastered the fundamentals.

Mastering React Hooks: How to Use Them Effectively in Your React Applications
Developers can now use states and other React features in functional components thanks to React Hooks, a potent new…
medium.com

5 React Design Patterns You Should Know
One of the most widely used front-end frameworks is React, and for good reason. Its component-based architecture…
medium.com

Practice building projects

Building projects is the most effective method to learn React. A to-do list or a calculator are good places to start, and you can work your way up to more difficult projects like an online store or social network.

Online Movie Streaming Website in React and Nodejs with Full Source Code
React and Node.js are two powerful technologies used to build web applications. The React Node.js Movie App is a…
medium.com

Learn testing

Software testing is a crucial component, and React offers a variety of testing methods and modules. With your React applications, learn how to create unit tests and integration tests.

Learn about performance optimization

Performance optimization becomes increasingly important as your applications expand. Learn about code splitting, lazy loading, and other methods that can enhance the efficiency of your application.

Optimize Your Code Right Away with These 4 React Suggestions
For creating user interfaces, React is a well-liked and often used JavaScript library. React has many wonderful…
towardsdev.com

Stay up-to-date

React is always changing, so it’s important to keep up with the most recent developments and recommended techniques. Attend conferences, participate in online forums, read blogs, and keep up with the React documentation.

The Future of Programming

certifieddev0101 — Mon, 24 Jul 2023 18:42:16 +0000

Artificial intelligence (AI) has revolutionized various aspects of our lives, from board games to customer service. As AI continues to advance and integrate into different industries, there has been growing concern about its impact on programming and whether AI will eventually replace human programmers. In this article, we will explore the current state of AI in programming, debunk myths surrounding AI’s capabilities, and examine how AI is reshaping the role of programmers.

The Rise of AI in Programming
Over the years, AI has made significant strides in creative pursuits, such as drawing pictures and composing music. It has also become capable of completing complex tasks, raising questions about its potential to take over programming roles. AI programs like DeepCoder, developed by Microsoft and Cambridge University, can not only write code but also learn and adapt.

However, it is important to differentiate between anxiety and reality. While the fear of AI replacing programmers is understandable, the capabilities of AI have often been exaggerated. AI is not a standalone solution that can replace human programmers entirely. It is merely a tool that can assist and enhance the programming process.

AI as a Tool, Not a Replacement
Just as calculators assist mathematicians but cannot replace their expertise, AI serves as a valuable tool for programmers. It can speed up processes, automate repetitive tasks, and provide code suggestions. For example, AI-powered tools like DeepCode act as a spell-checker for programmers, helping them write cleaner and more efficient code.

However, AI lacks the ability to understand the business value of features or make intuitive decisions. It requires human programmers to provide input, direction, and ensure the code aligns with the desired outcomes. Programmers play a crucial role in training and fine-tuning AI systems, ensuring they deliver accurate and reliable results.

The Symbiotic Relationship between Humans and AI
Contrary to popular belief, AI is not seeking to replace programmers but rather redefine their workload. AI aims to alleviate programmers from tedious and repetitive tasks, allowing them to focus on more important and creative aspects of their work. By automating certain aspects of programming, AI can improve efficiency and productivity.

Through integration and controlled use, AI and humans can form a symbiotic relationship in programming. AI can generate code snippets, suggest solutions, and streamline workflows, while programmers provide critical thinking, problem-solving skills, and domain expertise. This collaboration leads to a more efficient and effective programming process.

AI’s Limitations and the Need for Human Expertise
While AI has made remarkable progress, it still has limitations. AI-generated code may contain errors, such as unused variables or incorrect declarations. It lacks the ability to fully comprehend the context and business requirements of a project. Human programmers possess the knowledge and experience necessary to evaluate the quality and suitability of code.

Moreover, AI systems require continuous training and a constant feed of data. Programmers play a crucial role in monitoring, fine-tuning, and handling decision-making processes for AI systems. They ensure that AI remains aligned with the project goals and business objectives.

The Impact of AI on Programming Workflows
AI is already transforming programming workflows by introducing generative AI coding tools. These tools leverage natural language processing and existing code to suggest solutions, generate new ideas, and break down complex problems into manageable tasks. They offer developers a new level of creativity and productivity, enabling them to achieve more in less time.

With the help of AI, developers can focus on inventing innovative products, making strategic decisions, and refining their programming skills. AI-assisted engineering workflows are becoming more prevalent, allowing developers to harness the power of AI while retaining control over the final outcome.

The Changing Landscape of Software Development
The advent of generative AI coding tools and AI-assisted workflows is reshaping the landscape of software development. Developers can now rely on AI to handle repetitive and mundane tasks, freeing up their time and mental energy for more critical aspects of their work. This shift allows developers to become more efficient and productive, leading to better software outcomes.

AI’s influence extends beyond individual developers. Companies like Nvidia have leveraged AI to develop advanced chips and computing systems, powering artificial intelligence applications like ChatGPT and enhancing search engine capabilities. AI has also found applications in digital advertising, content generation, and various other industries.

Embracing the AI-Enabled Future
As AI continues to advance, it is crucial for programmers to embrace this AI-enabled future rather than fear it. By understanding the limitations and capabilities of AI, programmers can leverage its power to their advantage. Collaborating with AI can enhance their skills, boost productivity, and drive innovation in the field of programming.

While AI may automate certain aspects of programming, it cannot replace the human touch. The unique insights, problem-solving abilities, and creativity that programmers bring to the table are irreplaceable. By working alongside AI, programmers can unlock new possibilities and shape the future of programming.

Conclusion
Artificial intelligence is transforming the role of programmers, but it is not replacing them. AI serves as a tool that enhances and streamlines programming workflows, enabling developers to focus on higher-level tasks. The symbiotic relationship between humans and AI in programming holds the potential for increased productivity, efficiency, and creativity. As we embrace this AI-enabled future, programmers will continue to play a vital role in shaping the development landscape and driving innovation.

P.S.
This whole blog, except for the P.S. part, was written by AI.

Top Websites To Practice Coding.

certifieddev0101 — Sun, 23 Jul 2023 09:36:16 +0000

Source-Unsplash(Oscar Yildiz)
If you want to improve your coding skills, practice is the only option. But there are some sites that can help us a lot in coding practices and problem solving also expanding our knowledge. In today’s blog, I’m, going to describe them, so you can have the advantage of practicing coding professionally with these sites.

1) LeetCode

source-Medium
LeetCode is the best platform to help you enhance your skills, expand your knowledge and prepare for technical interviews. You can practice your code here and LeetCode can help you with this by giving you accurate mistakes analysis. You must use LeetCode to practice Data Structures and Algorithms to increase your chances of getting jobs. There is plenty of questions available for practice, You must try hands-on solving them all.

2) HackerRank

source-Wikipedia
HackerRank organizes many Hackathons which are fun to participate in. HackerRank is a place where programmers from all over the world come together to solve problems in a wide range of Computer Science domains such as algorithms, machine learning, or artificial intelligence, as well as to practice different programming paradigms like functional programming. You can also practice your code.

3) GeekforGeeks

source-GeekforGeeks
GeekforGeeks is not only for reading articles or getting help for errors in the code. You can also practice your code here, There are many examples that are asked in interviews to practice, So you will have the ease in cracking interviews. You must try GeekforGeeks. Your score is saved on the base of your ability to solve coding problems. You can also maintain streaks If you want to daily practice coding. There are many courses available on their site.

4) Codechef

source-Wikipedia
You can Learn competitive programming with the help of CodeChef’s coding competitions. Also, you can take part in these online coding contests to level up your skills. Codechef is the first choice of every competitive programmer. There are many questions available to practice your code. If you’re skilled at solving coding problems the site will rank you world-widely.

5) CodeForces

source-GitHub
CodeForces is also the best site to Practice for competitive programming. They organize many competitions among programmers and winners get exciting prizes. If your dream is to become a great competitive programmer, you must practice as many questions as possible and these sites are going to help you a lot. CodeForces is a great place to practice your code. You can practice for coding olympiads also. Here you will be ranked according to your performance.

6) InterviewBit

source-InterviewBit
If you are practicing coding to crack tech interviews then InterviewBit is for you. You can get any past year's questions solutions and practice them on the site. You will learn to write error-free, compilable code on your first attempt here if you practice hard.

7 JavaScript Powerful Optimization Tricks You Need To Know

certifieddev0101 — Thu, 20 Jul 2023 15:39:31 +0000

Every language has uniqueness, and JavaScript, the most widely used programming language, is no different.

This blog post will discuss some JavaScript Generic Optimization tricks that will help you write better code and make sure that the following is just not your response when you come all over them:

Fallback Values The fallback place to display some adjusting.

If the value is [] or 0, using logical OR || does not give you the expected results.

The bullish symbiosis would be a better solution?? If the defined value is null or undefined, only use the fallback values.

// Lengthy
let name;
if (user?.name) {
name = user.name;
} else {
name = "Anonymous";
}
// Shortly
const name = user?.name ?? "Anonymous";

Shortly For Switching Long switch cases are commonly maximized by using an object with the keys acting as switches and the values trying to act as return values.

const dayNumber = new Date().getDay();
// Lengthy
let day;
switch (dayNumber) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
// Shortly
const days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
// Or
const days = Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday.split(
","
);
const day = days[dateNumber];

Calls To Functions You can also use the binary operator to decide which function to call based on conditions.

The call patterns of the functions must be the same or you will end up facing errors.

// Lengthy
function f1() {
// ...
}
function f2() {
// ...
}
// Shorter
condition ? f1() : f2();

Multiple String Checks It is popular to need to check if a string is equal to one of the multiple values, which can quickly become irritating.

Luckily, JavaScript has a way to help you with this.

// Lenghty
const isVowel = (letter) => {
return (
letter === "a" ||
letter === "e" ||
letter === "i" ||
letter === "o" ||
letter === "u"
);
};
// Shortly
const isVowel = letter => /[aeiou]/i.test(letter);
For-of and For-in loops are beneficial for repeating over an array or object without having to manually keep track of the index of the object’s keys.

For-of

const arr = [1, 2, 3, 4, 5];
// Lengthy
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
// ...
}
// Shortly
for (const element of arr) {
// ...
}
For-in

False Checks If you want to check if a variable is null, undefined, 0, false, NaN, or a blank string, you can use the Logical Not (!) operator to do so without the need for multiple effects.

This makes it simple to verify if a variable contains valid data.

// Lengthy
const isFalsey = (value) => {
if (
value === null ||
value === undefined ||
value === 0 ||
value === false ||
value === NaN ||
value === ""
) {
return true;
}
return false;
};
// Shortly
const isFalsey = (value) => !value;

Secondary Operator You must have come across the ternary operator as a JavaScript developer.

It is an excellent method for writing concise if-else statements.

You can, however, use it to write concise code and even chain it to check for multiple conditions.

// Lengthy
let info;
if (value < minValue) {
info = "Value is too small";
} else if (value > maxValue) {
info = "Value is too large";
} else {
info = "Value is in range";
}
// Shortly
const info =
value < minValue
? "Value is too small"
: value > maxValue ? "Value is too large" : "Value is in range";
That’s all there is to it, folks!

Thank you for taking the time to read this.

It is completely free to follow!