When building React applications, especially complex ones, developers use a lot of media files and install third-party libraries. However, this can significantly increase the size of your application bundle, resulting in slower page load times and poor user experience. To address this issue, a good approach is to split your app bundle and implement lazy loading techniques to optimize your application performance.

In the past, achieving lazy loading in React required depending on third-party libraries. However, with the introduction of React.lazy() and React.Suspense in the React v16.6 update back in 2018, lazy loading has become more accessible.

React lazy makes it easy to code-split a React application by loading only the component and necessary bundle the user needs.

In this article, we will explore the implementation of React.lazy(), React.Suspense, best practices for lazy loading in React, and potential pitfalls you might encounter while working with code splitting.

What is Lazy Loading?

Lazy loading is a software development technique that optimizes application performance by loading specific resources only when they are needed.

Imagine you're building a large-scale blog using Reactjs. As your application component increases, you will notice that the initial loading time also increases, leading to slower performance. This is because all components, including those that are not immediately visible, are being loaded upfront, causing unnecessary overhead.

By implementing lazy loading with React Lazy, you can defer the loading of non-critical components until they are actually needed. This reduces the application’s initial loading time, optimizes performance, and provides a smoother user experience.

Implementing React Lazy Loading

To make lazy loading possible within the React library, React Lazy and React Suspense use the power of dynamic imports and code splitting to defer codes and components until they’re needed:

Let’s see how we can implement lazy loading in React.

Getting Started

We'll create a basic food recipe website for demonstration.

Prerequisites

Before you proceed, make sure you have:

• Latest Node version installed

• A good code editor to work with. I will be using Visual code studio.

Step 1: Setting Up the Project

To start, let's create a new React project using create-react-app:

npx create-react-app lazyloadingproject

npx allows us to use the create-react-app package without installing it first on our computer. This is especially useful if we’re working on a basic project.

Once the installation is complete, a folder named “lazyloadingproject” will be created in the specified directory, and all the packages you need to make the app work will be installed as well.

To run the project, execute:

cd lazyloadingproject

npm start

The server will start up at localhost:3000, and your starting homepage will look just like the one below;

Let's clean up the project a bit. Delete the app.test.js and logo.svg files, and remove their imports from App.js to prevent errors. Replace the code in App.js with a simple heading:

<h2>Lazy loading Project</h2>

You should now have a clean project like this;

Step 2: Install React Router

Since we'll have multiple pages, let's install react-router-dom to enable smooth navigation without page refresh:

npm install react-router-dom

Once the installation is complete, the next thing is to create a components folder that houses all the components you will use throughout this project.

Inside this component folder, create another folder called Navbar with a navbar.js and navbar.css file and add the following code;

Navbar.js

import React from "react";
import { NavLink } from "react-router-dom";
import "./Navbar.css";

const Navbar = () => {

return (

<div>
<nav>
<div className="logo-desktop">
<p>LazyLoading</p>
</div>
<ul className="nav-ul">
<li>
<NavLink to="/">Home</NavLink>
</li>
<li>
<NavLink to="/recipes">Recipes</NavLink>
</li>
<li>
<NavLink to="/contact">Contact</NavLink>
</li>
</ul>
</nav>
</div>

);
};
export default Navbar;

Navbar.css

nav {
display: flex;
align-items: center;

justify-content: space-between;
background-color: darkolivegreen;
padding: 0 20px;
}

.logo-desktop p {
font-weight: bold;
font-size: 18px;
color: white;
}

.nav-ul {
display: flex;
list-style: none;
font-weight: bold;
}

.nav-ul li {
margin: 0 10px;
color: white;

}

.nav-ul li a {
color: white;
}

Wrap your root component with BrowserRouter in index.js to enable routing:

import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

Render the Navbar component in App.js:

App.js

import "./App.css";
import Navbar from "./Components/Navbar/Navbar";
function App() {
return (
<div className="App">
<Navbar />
</div>
);
}
export default App;

Now, you have your basic navigation set up.

Step 3: Create Multiple Components

Create a pages folder within the src directory and add the following files: Home.js, Recipes.js, and Contact.js. Populate each file with the relevant code:

Home.js

import React from "react";
import HomeDescription from "../../Components/HomeDescription";
import HomeImage from "../../Components/HomeImage";
import "./Home.css";
const Home = () => {
return (
<div className="flex">
<HomeDescription handleClick={handleClick} click={click} />
{click ? <HomeImage /> : ""}
</div>
);
};
export default Home;

Home.css

.flex {
display: flex;
align-items: center;
flex-direction: column;
}
.imgclass {
max-width: 100%;
height: 30%;
object-fit: cover;
padding: 50px 0;
}
.flex h1 {
font-size: 2rem;
}
.flex p {
width: 60%;
}
.recipe-btn {
padding: 14px 8px;
margin-top: 20px;
background-color: darkolivegreen;
color: white;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
border-radius: 7px;
border: none;
}

In the "Home.js" component, two different components are rendered on the home page: HomeDescription and HomeImage. To set up these components, create two new files called "HomeDescription.js" and "HomeImage.js" and paste the corresponding code.

HomeDescription.js

import React from "react";
import { useNavigate } from "react-router-dom";
import "../Pages/Home/Home.css";
const HomeDescription = () => {
let navigate = useNavigate();
return (
<div className="flex">
<h1>Tomi's Recipe App</h1>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae{" "}
</p>
<button className="recipe-btn" onClick={() => navigate("/recipes")}>
Check Recipes
</button>
</div>
);
};
export default HomeDescription;

HomeImage.js

import React from "react";
import { format } from "date-fns";
import img3 from "../Assets/img3.jpg";
const HomeImage = () => {
let today = format(new Date(), "MM/dd/yyyy");
return (
<div>.
<div>{today}</div>
<img className="imgclass" src={img3} alt="homeimage" />
</div>
);
};
export default HomeImage;

Notice that the date-fns library is used to format the current application date. Be sure to install it:

npm install date-fns

For the other pages, follow similar steps and paste the corresponding code.

Recipes.js

import React from "react";
import img1 from "../../Assets/img1.jpg";
import img2 from "../../Assets/img2.jpg";
import img3 from "../../Assets/img3.jpg";
import "./Recipes.css";
const Recipes = () => {
return (
<section className="recipewrapper">
<div className="recipeheading">
<h1>Recipes</h1>
</div>
<div className="wrapper">
<div className="card">
<img src={img1} className="imgclass" alt="img 1" />
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae{" "}
</p>
</div>
<div className="card">
<img src={img2} className="imgclass" alt="img 1" />
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae{" "}
</p>
</div>
<div className="card">
<img src={img3} className="imgclass" alt="img 1" />
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae{" "}
</p>
</div>
</div>
</section>
);
};
export default Recipes;

Recipes.css

.recipewrapper {
padding: 30px 0;
}
.recipeheading h1 {
font-size: 2rem;
}
.imgclass {
max-width: 100%;
height: 60%;
object-fit: cover;
}
.wrapper {
display: flex;
}
.card {
padding: 0 20px;
}

Contact.js

import React from "react";
import "./Contact.css";
const Contact = () => {
return (
<section className="contact">
<div className="contact-page">
<h2>Contact Us</h2>
<div className="contact-card">
<label>Name</label>
<input type="name" className="contact-input"></input>
<label>Email</label>
<input
type="email"
className="contact-input"
placeholder="test@example.com"
></input>
<label>Message</label>
<textarea></textarea>
<button type="submit" className="contact-btn">
Submit
</button>
</div>
</div>
</section>
);
};
export default Contact;

Contact.css

.contact-page h2 {
font-size: 2rem;
}
.contact-card {
display: flex;
flex-direction: column;
background: rgb(239, 239, 239);
width: 26%;
max-height: 480px;
margin: 0px auto;
border-radius: 8px;
padding: 20px 0;
}
.contact-input {
width: 90%;
margin: 0 auto;
padding: 5px;
border: 1px solid #808080;
}
label {
text-align: left;
padding: 10px 20px;
font-weight: bold;
}
.contact-btn {
border: none;
background-color: darkolivegreen;
color: white;
font-weight: bold;
padding: 6px 14px;
transition: all 0.4s ease-in;
cursor: pointer

The recipe page contains more details about some recipes and their descriptions. The final page, which is the contact page, contains a basic HTML contact form.

Step 4: Define Routes

Since the App component serves as the root for this project, let's set up the routes within it:

<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/recipes" element={<Recipes />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
…

We imported the Routes and Route feature from react-router-dom, defined our routes with paths, and linked them to their respective components.

This is what your home page looks like now.

Now, open the DevTools and click on the network tab.

In the "bundle.js" tab, you'll notice that the two components on the homepage are bundled together. The app's size and loading time are currently 445kb and 174ms, respectively.

This is because React downloads all required resources during the initial app load, which isn't optimal for performance.

To enhance performance, you can split your app's components and bundle only the necessary resources for each load.

Implementing Lazy Loading Using React.Lazy and React.Suspense

For our project, we'll utilize the React.lazy() function to load resources as needed and fetch additional JavaScript as users navigate between pages.

Now, let's refactor the imports in your Home.js file as follows:

const HomeDescription = React.lazy(() => import("../../Components/HomeDescription"));

const HomeImage = React.lazy(() => ("../../Components/HomeImage"));

If you reload your app and navigate to other pages, you will get the error below.

This error occurs because React.lazy requires the Suspense component to display fallback content while the lazy component loads.

React Suspense

Suspense is a component required by the lazy() function to reflect some fallback content while the lazy component loads.

To address this error, wrap the Suspense component around the multiple lazy components in

…
<div className="flex">
<Suspense>
<HomeDescription handleClick={handleClick} click={click} />
{click ? <HomeImage /> : ""}
</Suspense>
</div>

Reload your browser, and in the network tab, click on bundle.js again.

You'll notice that the app's size has decreased significantly to 302B, and the loading time is now 19ms. The app's components have also been split into two, and the HomeImage component only loads when the "Check Recipes" button is clicked.

What are some best practices when it comes to react lazy loading?

While our application's performance has improved considerably, lazy loading components can potentially negatively impact the overall website experience with UI glitches, excessive network requests, and multiple chunk files.

To create evenly-sized bundles without disrupting the user experience, you can employ route-based code splitting.

Route Based Code-Splitting

Route-based code splitting involves code splitting only the components rendered when a specific URL is visited.

To achieve this, conditionally load your routes in the App.js file using React.lazy(). This ensures that resources for these routes are loaded only when the route is accessed.

In the App.js file, refactor the imported components to use React.lazy():

const Contact = React.lazy(() => import("./Pages/Contacts/Contact"));
const Home = React.lazy(() => import("./Pages/Home/Home"));
const Recipes = React.lazy(() => import("./Pages/Recipes/Recipes"));

Next, use the Suspense component and wrap the Routes within it:

<div className="App">
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/recipes" element={<Recipes />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Suspense>
</div>

After reloading your recipe application again and checking the network tab, you will see that a “src_Pages_Home_Home_js.chunk.js” file gets added to the tab. This is the JavaScript code of the Home page, which gets split from the bundle.js file and added to a separate chunk.js file. Similarly, as you load other components, additional chunk.js files are created for each lazily loaded component.

Preloading

To mitigate potential UI glitches stemming from lazy loading, you can preload components or load them ahead of time. The react-lazy-with-preload library streamlines this process.

Install the library:

npm install react-lazy-with-preload

Change your import statement from this;

const HomeImage = React.lazy(() => import("../../Components/HomeImage"));

To this;

import { lazyWithPreload } from "react-lazy-with-preload";

const HomeImage = lazyWithPreload(() => import("./OtherComponent"));

And finally,

use the preload method like this;

useEffect(() => {
HomeImage.preload();
}, [])

If you reload the app again, you will notice that your HomeImage component now loads immediately without having to click the “check recipes” button.

Named Export in React.Lazy

Suppose you currently use named exports in your React components. In that case, you might need to re-export these named exports as default exports in an intermediate module to prevent unused components from being imported. This is because React.Lazy() currently doesn’t support named exports.

For instance, if you have the following named export:

export const namedComponent = "../../Components/HomeDescription";

You can re-export it as a default component like so;

export {namedComponent as default} from "../../Components/HomeDescription";

Conclusion

This article has demonstrated how to implement the lazy function and Suspense component in React applications to enhance performance. You've also learned about the downsides of React lazy loading and how to address them using route-based splitting and preloading. Lastly, you learned about the best practices for React lazy loading.

You can check out the full code here: https://github.com/Racheal-spec/reactlazy

Thanks for reading!

How Do We Judge an Application's Performance?

Application performance entails how well an application functions and how seamless the user experience is. This includes how simple it is for users to navigate through your app and receive desired responses and behaviour. Therefore, If an application is fast, predictable, and stable, you can consider it high performing.
Now, how do you ensure that your application is never low on performance or experiences downtime? This is where application performance monitoring comes in.

What Is Application Performance Monitoring (APM)?

Application performance monitoring involves businesses using monitoring tools or software to track their applications. Organizations use these monitoring tools to get visibility into the performance metrics of their applications such as response time, errors, memory, latency, and so on. Monitoring your application helps to quickly track down the underlying cause of problems or bugs in your apps as well as provide solutions to solve these issues before they affect users’ experience.
Since we already have a basic understanding of what application performance monitoring is, it’s time to focus on how to improve your application performance monitoring to drive better results.

How Do You Improve Your Application Performance Monitoring?

There are five simple steps you can take to improve your application performance monitoring.

1. Choose the Right Monitoring Software

Modern applications are complex, so it's often difficult for development teams to manually figure out what's causing performance problems. So, instead, they commonly turn to an application performance monitoring tool.
Choosing the right monitoring tool can be a hassle, as several application performance monitoring solutions exist, each with unique features. How, then, do you identify the right application performance monitoring solution for your business?
Be sure to employ an application performance monitoring solution that

• is easy to use,

• transforms data into a useful solution,

• provides complete visibility into the whole application stack, and

• provides a more actionable view of performance issues.

To make your decision-making process even easier, an application performance monitoring tool such as Netreo provides useful insights into performance after analysis, full-stack monitoring, real-time dashboards, and a great user experience. In this way, you get to focus on what’s important in your business while Netreo handles your application performance smartly.

2. Create Your Own Rules

Every organization has an approach or strategy that’s unique to them when monitoring performance. As a result, it's critical to ensure that your application performance monitoring solution addresses the difficulties or challenges that your company is encountering.
You can do this by creating custom rules that define the requirements your application must meet. That way, when your app fails to meet a requirement, your application performance monitoring tool will create an issue that such a problem exists. These custom rules can include what you believe to be typical app behaviour for metrics such as the average response rate, CPU usage, error rates, and so on.
For example, you can decide to create a rule that when an API call takes longer than 1,500 milliseconds, your application performance monitoring solution should flag the issue. This way, you will only get an alert when your application has met this condition.

3. Use a System that Provides Real-Time Notifications

To immediately resolve performance issues before they become critical, it’s important to have access to a full-stack alerting system in your application. This system sends a notification to the expected individual as soon as your key metrics begin to change. An alert might not necessarily mean that a problem has occurred; it might also be a warning for problems that might occur in the future. This way, you can quickly attend to issues before they become complex.
It gets even better with Netreo’s intelligent alert management system. This system doesn’t just handle changes in your application environment smartly; it also helps validate alerts automatically through multiple tests to get rid of several false alarms that might flood your phone or email.

4. Build a Special Team

To proactively attend to your application performance issues as they arise, it’s important to have a special engineering team that helps resolve these performance problems as they’re discovered. This team will be in charge of monitoring the performance of applications in the company, ranging from slow servers and loading time to traffic spikes and user experience.
But to create your application performance monitoring solution's rules, set up notifications, and build a team, you first have to be getting the right information. This leads us to the last point: using the right metrics.

5. Use the Appropriate Metrics

With application performance monitoring, businesses can track the different aspects of their applications in real-time. However, it's usually difficult to get the root cause of these application performance problems due to inappropriate analysis methods.
To ensure that an application's performance is reliable, developers must make use of the appropriate procedures and metrics to discover the exact source of a problem. You should monitor important metrics such as

• memory usage,

• request rates,

• CPU usage, and

• response time.

But you shouldn't assume that because your request rates, for example, are high that your application is high performing. You should always view these important metrics from a larger perspective in an application environment rather than in isolation.

Key Metrics to Measure

Let's take a quick look at some key metrics you should focus on.

Request Rates

This metric helps you to keep track of how many requests your application receives, where they come from, and the number of returning users. Monitoring request rates also gives you a decent idea of how much traffic comes into your app. This helps you understand how this increase or decrease in traffic can affect your organization's success.

Response Time

Response time is the time between when a user submits a request and when the program shows that the request is complete. The result from this metric usually indicates whether speed affects your application performance.

Error Rates

This is the number of requests that result in an error when users make requests within an application. This metric is very important in determining how efficient an application is. This is because it measures how often an application's performance fails.

CPU and Memory Usage

You can check how much CPU and memory your application is consuming in real time by analyzing your CPU and memory usage. This enables developers to swiftly resolve problems on your server as soon as they occur. An application that has a high memory or CPU usage will perform poorly regardless of how low the site traffic is.

Latency

Latency is the time it takes for a block of data to be sent over a network. For example, if it takes 100 milliseconds for a request to be sent over from the client to the server, then the latency of such an application is 100 milliseconds. An increase in latency might indicate a performance issue within an application. This is because latency determines the speed with which an application responds to a request.

Focus on What’s Most Important

To understand your users' experience, it’s important to view your application from the users’ perspective. What is the average response rate for the app? How often do users come back? Do they get an error when a particular user action is being executed? If yes, what are the errors? How many users were impacted, and on what devices?
All of these and more are questions that must be answered when monitoring your application's performance. However, using an application performance monitoring tool and adhering to the rules above can give your organization an edge. You get to focus on what matters while these application performance monitoring solutions intelligently do the monitoring for you.

This post is originally published on Netreo

A Very Quick Backstory

I started programming in 2018 without a laptop. Did that for about 3months and couldn’t keep up, so I dropped it. Started again officially in 2019 while still at the university, this time with a laptop (thanks to my dad). Fast forward to 2021 ending, I got a 4-month contract job, and working with my boss instilled the confidence I needed. The contract job pay was below par, but I was okay with it for a start because I was still a student, and I wouldn’t trade the knowledge I gained from working with him for anything.

I was going to graduate that year and knew I needed to make more money to be able to support myself.

Back To 2022

I make plans a lot and like to have almost everything in order or strategize well before taking a step. 2022 was different. I started the year very hopeful, with no exact plan in mind. I had worked my ass off the previous year and knew I only needed to improve my skill and get a good job. My resume was in good shape, my portfolio made sense, and I even had a tech blog. Perfect. Now all I needed was to start applying for jobs.

I applied for jobs all through January, and nothing was forthcoming except rejection letters, of course. I used to work as a freelance copywriter and knew how sweet earning in dollars was. I already told myself I wanted to earn in dollars as a dev too, so I did not even bother to apply to Nigerian companies, except one, whose interview I failed woefully anyways due to lack of preparation. The rejection was a lot.

By February, I was getting impatient. But something good happened. I got a mail from a Nigerian company that wanted me to work with them. I did not apply to this company, so why? They said they came across my profile and wanted me to work for them. A good sign, finally. I went through with the interview and assessment. And you can already guess what happened. I accepted the offer letter because ‘half bread is better than none.’ I had to drop all my “I want to earn in dollars” shenanigans for the main time.
A few weeks after I accepted my offer letter, a friend told me about a possible job opening in a company in Europe. I did not take it seriously, for God knows why. I applied anyways. A week later, I was called for an interview, and it started to look real. I went through the 3 stages interview, and voilà, an offer letter came through.

All of this happened within the first few weeks of February. A lot can happen in 24 hours, really. It felt like a dream, and at the same time, it felt like a job well deserved after 2 years of hard work and persistence. I now had two jobs, just like that. I knew I wouldn’t be able to keep the two jobs. At least I did not want anything affecting my performance for the first few months. After a month, I had to resign from the Nigerian company. I felt bad, really, but it is what it is. The CEO was nice and even paid me for the few works I did for them.

I moved out of my parent’s house into mine after 2 months. And did I tell you I was going to be on probation for the first 3month and after that, my performance would be reviewed? Honestly, I wasn’t even confident in my skill anymore. It felt like I was going to be sacked suddenly because I wasn’t good enough. New job trauma, lol.

3months later, this is one of the things my manager had to say.

Personal Achievements And Failures

I did not have time for many things I wanted to do this year because of my new job and environment. I was even burnt out a little at a point. But I pushed through regardless because…stars don’t give up : )

I launched my blog this year. I did this once but gave up because I had other priorities, but I’m back and better now. I share informative articles on personal development, career tips, tech, and productivity. This blog is very dear to me, and I’m working towards doing better next year, so make sure to stick around.

I indirectly started something I have always had in mind because I saw an opportunity to do so, and whew’ it failed. It’s an organization that’s focused on helping people, especially women, get into tech with the right platform (still coming up), resources, and mentorship. I got DMs from people who wanted to get into tech and needed help, and I decided to make something out of that since it was something I had always wanted to do. Maybe I wasn’t in the right headspace at the time, maybe. But if you’re willing to join a movement like this, please send me a direct message on Twitter. We can make something beautiful together.

It was a long year, and there is so much more I want to share. People and Lagos showed me shege, but I will just put a pin on it here.

I’m grateful to God for my journey so far. My journey from 2018 has not been a smooth one. I fought one one-on-one with Sapa so many times. But through it all, I’m a living testimony that with hard work, patience, and a good mindset, you will get what you want and much more.

2022 is what I envisioned it to be, and I hope 2023 is better.

• communicate with external sources (i.e., third-party APIs) that provide the information you need

• build an internal API for your company app or personal project

However, it’s important to make your API easily accessible and flexible. So, how do you create an API that follows consistent API design, guidelines, and architecture?

In this post, I’ll share the best ways to design a good API architecture regardless of the API type or protocol used by your business or application. But before we do that, let’s recap the concept of an API.

What Is an API?

API is an acronym for application programming interface. APIs are request types or methods that allow applications or programs to access back-end data and functionalities that enable developers to integrate and build complex applications. A good example of this is Facebook’s Graph API. Developers use this API regularly to get data into and out of the Facebook platform. This includes uploading photos, adding Facebook comments to websites, and so on. Another example is an operating system’s API like the Windows API, popularly known as Win32. The Windows API gives programs access to resources available to a Windows system like the file systems, the user registry, buttons, the scrollbar, and so on. This makes it easier for developers to implement necessary features without having to write programs from scratch every time. Now that you’ve had a refresher on what an API is, let’s talk about how they’re designed.

Approaches to API Architecture Design

There are different approaches to designing an API architecture. REST, SOAP, and RPC are a few of the popular types.

SOAP

SOAP (simple object access protocol) is a messaging protocol for exchanging information between applications. It’s XML-based and can either exchange a document or call a remote procedure. In SOAP, we define a remote procedure in the sense of the client calling a specific method or procedure whenever a call is being made to the server.

REST

REST (representational state transfer) is a set of architectural styles that are used to design applications over HTTP. The idea behind REST is to use various URLs as access points to get resources from the server whenever developers need them. A RESTful API must adhere to the architecture created by Roy Fielding, whose REST guidelines include caching, client-server architecture, uniform interface, and so on.

RPC

In RPC (remote procedural call), the client makes a remote procedural call by sending an HTTP request to the server and getting a response in return.

How Do You Design a Good API?

When designing your API, you must follow some important patterns and best practices. These best practices will ensure that your API is user-friendly and functional, regardless of which design architecture you choose.

Security

One of the most important factors to consider when designing your API is security. This is because building APIs that expose your data and application to the public also requires you to protect your system against attacks. And you don’t just have to protect your system, but also that of your partners, customers, and employees.

The more exposed an API is to the public, the more vulnerable it becomes to attacks. These attacks can include cross-site scripting, access control flaws, injections, credentials stuffing, and so on. From here, attackers can gain access to your network. This could lead to a data breach that can cause a company to lose its reputation, customers, and revenue. So, how do you secure your API?

Employ a reliable API security service: Make use of services that help detect attacks and prevent them. For example, Traceable, an end-to-end security service for APIs and cloud-native applications, helps to automatically measure risks, discover and prevent attacks, defend your app, and analyze your data against threats.

Follow best practices for API security: Ensure your API enforces a strong authentication and authorization solution such as Oauth2.0. It’s also important to limit the number of requests that your users can return to your application by implementing pagination. And lastly, remove sensitive information like access keys and passwords before you share your API with the public.

Versioning

When designing your API, assume that you’ll always need to update or modify your API over time. You need to keep the developers that’ll use your API in mind when modifying your API. Developers need to know whenever you make a major update in your API to avoid their own app breaking. Including versioning in your app can be done in two ways:

• by including the API version in the header

• by including the API version in the URL

How to Include the API Version in the Header

This approach involves requesting a specific API version using the Accept header, by providing more detail (such as the API version) about a given resource.

GET  /data/5 HTTP/1
Accept: application/vnd.mydata.v1+json

The Accept header here is used to provide the server with information about the type of response the client can accept. Here, the API URL doesn’t change across versions, but each version has a complex header attached to it. This method follows the HTTP standards, so it’s mostly recommended. How to Include the API Version in the URL

Including the API version in the URL gives users a quick understanding of the API version they are currently using. It also helps them avoid breaking their app by only calling the endpoint with the appropriate version. Here, anyone looking to call the endpoint can easily see in the URL that the API is in its fifth version:

http://www.companyname.com/api/data/v5

The downside to this is that with the release of so many versions, it becomes quite tasking for companies to keep providing support for these different versions, which might impact users. In my opinion, the best way companies can manage this situation is by;

• maintaining the older versions only for a certain number of years,

• providing a release note or documents that explain the above decision to the users, and

• maintaining only the last two or three versions with the current version.

Although this method doesn’t adhere to the REST API principles, it’s the most common and easiest to manage.

Performance

Another requirement I consider one of the most critical when designing an API is performance. A slow API can be disastrous to the growth of a company. There are a few best practices you can keep in mind while designing your API to ensure that your API is fast and doesn’t break before or after production.

• Caching: Caching is used to store data that is accessed frequently by the server. Instead of making a request to the server or database every time, one can use a cached version of this request, which helps to improve performance and increase load time.

• Define rate limits in your documentation: Defining a rate limit helps to limit the number of requests a specific client can make in a particular period. This helps to reduce the heavy load on the app and also improves performance. Here’s an example of what a rate limit looks like from GitHub documentation.

GitHub documentation on rate limits

Good Documentation

Speaking of documentation, no matter how good an API is, it’s going to be hard to use without proper documentation. A well-documented API doesn’t just attract more developers and decision-makers such as CTOs and product managers. It also makes it easier for them to test, use, or implement your API.

To write good documentation, you must ensure that it includes a section that provides a general overview of your API. With this, people can thoroughly understand everything your API does and how it can benefit them. From here, you can then provide a page for them to get started with the API.

You should also provide examples or a test environment where developers can test your API and make real calls. For example, take a look at this Spotify API documentation.

Spotify Web API documentation

Spotify provides example code for developers. And it also makes a console available to enable developers to explore different endpoints. With this, developers can get familiar with the API endpoints. They can make requests, get responses, and learn the requirements needed to implement them.

Additionally, your API documentation must contain sections and features developers consider very important and expect to be present in every documentation. These include sections that walk developers through your authentication and authorization process, status codes and error messages, parameters, and so on. Last, make sure your API is readable. Avoid using technical jargon. Instead, write in plain language that’s easy for anybody reading your documentation to understand. A Well-Designed API Stands Out From the Crowd

Regardless of which architecture you choose, you need to create a well-designed API because developers are your customers. So, irrespective of whether your API is paid or free, providing them with excellent service is important. Excellent service includes making sure your API is easy to use, understand, and consistent. You also want to stay ahead of the competition, and a well-designed API gives you an edge. Consuming an API should be fun. But, unfortunately, tons of them are frustrating and difficult to use because of poor design. The key takeaway to designing a good API architecture is by adhering to the design principles mentioned above. These include good documentation, performance, security, and consistency.

Read the original post on traceable

Routing is a very important aspect of every website. In React Js, routing is a process that allows a user to navigate to the different URLs that make up a React application. This is made possible through the use of a standard library system called React Router. With react-router, we can define multiple routes in our applications and render different components present in the app based on the route that matches the current URL being used. React router enables one to handle routing on the client side of a web application, thereby mitigating the issue of the old way of serving pages from the server side where pages refresh on every visit (i.e. making unnecessary calls to the server side).

To effectively understand this article, you need to have a basic understanding of react and react routing.

The react-router package consists of 3 different routers that we can make use of when building our apps. These routers include Browser Router, Hash Router, and Memory Router.

In this article, we will be focusing on the differences between Browser Router and Hash Router and why we should use them in our applications.

What is Browser Router?

Browser Router acts as a parent component that stores all of the other components present in our applications. It uses the HTML5 history API (pushState, replaceState, and the popstate event) by manipulating the browser session history to ensure that our UI matches its current URL.

A browser session history keeps track of all the pages visited in a browser tab and also provides useful properties that enable one to navigate back and forth in the browser using the user’s history.

Browser router makes use of the web server and also needs to be configured in other to function properly. This configuration is what makes routing on the client-side possible, otherwise one would get a “404 not found” error when visiting a particular page rendered in a browser.

Using the Browser router in our app, we will need to import it into our application like this.

import { BrowserRouter as Router } from "react-router-dom";

The above line means we just renamed “BrowserRouter” to “Router”, that’s all it does, And then, we can wrap the router around our application like this;

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

When to Use

It’s best to use browser router when building large applications that require a server, though, the react-router-dom team advises one to use the browser router always and also try to configure it to work on all our applications.

What is Hash Router?

The Hash router on the other hand uses the client-side hash routing (i.e. window.location.hash) to ensure that your UI matches its current URL in your browser.

Whenever a new page gets rendered, the hash routes get appended to the browser URL, like this localhost:3000/#/about. The hash router usually does not require a web server to load a page because its hash URL ( e.g. localhost:3000/#/about ) cannot be read from the server, it’s usually handled by react-router, which makes configuration easier. Using hash router in your app is not recommended by the react-router-dom team because it does not support legacy browsers and might also be considered bad for SEO because search engines only rank contents that are available on the first load.

To use hash router in our app, we will also import the hash router;

import { HashRouter as Router } from "react-router-dom";

and use it in our app like this;

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

When to Use

If you’re trying to build static applications that only require you to use host providers like Netlify and SEO is not of utmost importance, then using hash router might be the best option.

Major Differences Between Browser Router and Hash Router

Conclusion

So far in this article, we have briefly described routing in ReactJs. We’ve explored the characteristics of both browser router and hash router, and have also understood their use cases. It is safe to say that both routers are good, but it is mostly advisable to use Browser router when building large applications that require one to have a hosting provider and also use Hash router when using host providers that only support static applications (e.g. Netlify).

Why are PropTypes Essential??

When building applications in React, errors often occur when passing props to components. These errors can lead to challenging bugs, especially in extensive projects with numerous components.

This is mostly because JavaScript functions are flexible, allowing them to accept varying data types without generating errors. This makes it challenging for developers to pinpoint exactly where a problem originates when something goes wrong.

For example; The Component.js file below has two props called name and bookTotal with data types of string and number respectively.

import React from "react";

 const Component = ({ name, bookTotal }) => {
   return (
     <div>
       <p>
         my name is {name} and I have {10 + bookTotal} books
       </p>
     </div>
  );
};

export default Component;

Subsequently, we need to introduce our 'Component' into the 'App.js' file to pass props and visualize our app.

Now, imagine we accidentally pass the 'bookTotal' prop as a string instead of a number, as shown in the following code snippet. Our app would behave unexpectedly, yet no error would appear in the console.

import "./App.css";
 import Component from "./Component";

 function App() {
   return (
     <div className="App">
       <Component name="Tomisin" booksTotal="20" />
     </div>
   );
}

export default App;

Below is what the result looks like;

In our Component.js file, we were trying to perform basic JavaScript addition by adding 10 and bookTotal prop together, which is meant to give us a total of 30 books, but now our result shows 1020 books, which is wrong.

JavaScript converted the number (10) into a string and proceeded to concatenate both strings without signalling an error that a number was anticipated instead of a string.

To avoid issues like the one above, it's crucial to diligently verify data types passed between components and confirm their alignment with expected types. To aid JavaScript in detecting such mistakes, PropTypes or TypeScript come in handy.

PropTypes and Typescript allow you to define and enforce the types of props being passed around your application. This helps to catch errors early on and makes it even easier to maintain and scale your codebase over time.

Using both methods is good, but in my opinion, your choice depends on how large your app is going to be or how you intend to use it. If you’re building a smaller app or a tool/library that will be used by others, using PropTypes might be the best option. And I’ll be talking more about PropTypes for this article.

Getting Started

To use PropTypes in react we need to install the dependency with the command below;

npm install prop-types –save

Then you import it into your project files like this;

import PropTypes from "prop-types";

Using PropTypes in React

Different validators in PropTypes can be used to check whether the data one received is valid.

Basic data types

This is the most basic way one can check if a prop is valid in react components. This is done by checking if the prop is one of the primitive data types in Javascript such as boolean, strings, numbers etc.

Here's a list of basic PropTypes for data type validation in JavaScript:

PropTypes.bool; //must be a Boolean
PropTypes.object; //must be an object
PropTypes.number; //must be a number
PropTypes.string; //must be a string
PropTypes.func; //must be a function
PropTypes.array; //must be an array
PropTypes.symbol; //must be a symbol
PropTypes.any; //Can be any property

Referencing the previous example, to prevent passing a string instead of a number, enforce PropTypes in your component like so:

import './App.css';
 import Component from './Component';
 import PropTypes from 'prop-types';

 function App() {
 …

 Component.propTypes = {
   name: PropTypes.string,
  bookTotal: PropTypes.number
}

export default App;

Using this PropType, we can make sure that “name” is always a string and “bookTotal” is always a number, and when we do otherwise just like we did earlier we will have the warning below in our console;

Required types

To ensure that a particular prop is mandatory or required for a particular component, we can specify the isRequired property;

…
 function App() {
 …

 Component.propTypes = {
   name: PropTypes.string.isRequired,
   bookTotal: PropTypes.number.isRequired
 }

export default App;

Since we have specified that the two props are required, it is important to pass a value to both components. If we do not pass a value to bookTotal for example, we will receive the warning below in the console.

Multiple Types

Certain PropTypes only allow specific data types for props. They include:

• PropTypes.oneOfType

• PropTypes.oneOf

The 'PropTypes.oneOfType' method permits specifying acceptable data types for a prop using an array of valid PropTypes.

Consider the example below:

function App() {
   return (
     <div className="App">
       <Component name="Tomisin" bookTotal={4} />
     </div>
   );
 }

 Component.propTypes = {
  bookTotal: PropTypes.oneOfType([PropTypes.array, PropTypes.number]),
};

export default App;

In this case, 'bookTotal' can accept either a number or an array. Supplying a string, that doesn't match either type, triggers a warning.

For 'PropTypes.oneOf', this approach involves an array of permissible values rather than an array of PropTypes. This is mostly useful if you have a set of named constants for different states. For example, you can set two constant states to the bookState prop, this means the said prop can only be valid when you have only the two states in the example below.

function App() {
   return (
     <div className="App">
       <Component name="Tomisin" bookState="loadingbooks" />
     </div>
   );
 }

 Component.propTypes = {
  bookState: PropTypes.oneOf(["Readbook", "Unreadbook"]),
};

export default App;

Since "loadingbooks" isn't part of the accepted array of props, an error occurs;

Conclusion

We have seen how PropTypes can be very useful in validating data types in React. Exploring the use of propTypes can be a good way to catch errors and also flag props as important when building our applications.

Thanks for reading :)

CSS selectors are the tools we use to pinpoint and style HTML elements. While there's an array of CSS selectors to choose from, I'll focus on discussing just five that are particularly powerful and useful.

1. Direct Child Selector (> sign).

2. General Sibling Selector (~ sign).

3. Adjacent Sibling Selector (+ sign)

4. Link Pseudo-classes

5. Negation Pseudo-class (:not( y ) )

Direct Child Selector (> sign)

This selector targets elements that are direct children of a container div. It's most effective when you only want to select the immediate children of a parent element. Consider this example;

<div class="box">
  <p>This is the direct child</p>
  <div>
    <p>this is children of child div</p>
    <p>this is children of child div</p>
  </div>
  <p>This is the second direct child</p>
</div>

.box > p {
  color: red;
}

.box > p here targets only the <p> tags directly under the .box container div. The children of the child div don't turn red because they aren't direct descendants of the container div.

General Sibling Selector (~ sign)

The ~ sign is a sibling combinator that targets all elements after the selected elements, it could be a div, type or just a class. Looking at the previous example; If you want to select all 'p' tags after the box-child div, we can do this;

<div class="box">
  <p>This is the direct child</p>
  <div class="box-child">
    <p>this is children of child div</p>
  </div>
  <p>This is the first child</p>
  <p>This is the second child</p>
</div>

.box-child ~ p {
  color: red;
}

And then, we get this result;

Another example we can also look at is this; If you have a list of items and you want to select only some items on the list, we can also use this ~ selector.

<div class="box">
  <ul>
    <li>Item 1</li>
    <li class="list1">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

li.list1 ~ li {
  color: red;
}

So, here, you’re saying I want all Li’s after the Li with the class of .list1 to have a red colour. The third and fourth item here changes to a red colour without including the first and second item.

Adjacent Sibling Selector (+ sign)

Similar to the general sibling selector, this selector combines elements that have the same parent div. It only selects the element directly succeeding the former selector. In this example, to select only the list item directly after the Li with the list1 class, you can use the +(plus) symbol.

<div class="box">
  <ul>
    <li>Item 1</li>
    <li class="list1">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

li.list1 + li {
  color: red;
}

And you should get this as a result;

Link Pseudo-classes

Using link pseudo-classes gives you the ability to style various states of your HTML link. These two pseudo-classes are worth noting:

• :link targets unvisited links.

• :visited target links that have already been clicked.

Here is an example;

<div class="html-links">
  <a href="#">This is the link I want to visit</a>
</div>

<style>
 a:link{
     color:blue;
 }
 a:visited{
     color: purple;
 }
    </style>

You have this when the link hasn’t been clicked;

This is when the link has been clicked.

Negation Pseudo-class (:not( y ) )

This selector is arguably the most powerful of all the selectors mentioned so far. The :not() pseudo-class enables you to select elements that don't match a specific selector.

For instance:

If you have a small div with a background image and a text overlay and you want to select the text displayed on this image and also style the div itself; Instead of using two different selectors to get this done(i.e. one to style the div and another one to negate it), you can use the :not( ) selector, which will in this context select every element except those that do not match the argument passed. Just like the one below;

.div:not(img) {
  background-color: Red;
}

This code implies "select everything within .div that isn't an image." It's an efficient way to style elements that deviate from a particular rule.

Another example we can look at is the one below;

<div class="blue">
   <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     </ul>
 </div>
 <div class="pink">
   <ul>
     <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>
<div class="black">
  <ul>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

 <style>
 div:not(.pink){
    background-color: red;
}
 </style>

Here we have two different divs with different classes and this code is saying, “Hey, I want to select all divs without the class of pink and I want them to all have a background of red. Which should give you this result;

Wrapping up

These CSS selectors are your tools for crafting finely tuned styles. Embrace their capabilities and improve your web development skills.

If you found this article helpful, don't hesitate to give it a like or share.

Thanks for reading.

There are various ways to store data within a user's web browser, and some of these methods include:

Cookies: Using Cookies was pretty much the primary means of browser data storage, until recently. They have a maximum of 4kb of data storage, which means larger data can’t be stored all at once. Additionally, cookies were sent to the server with every request, accessible to both client and server sides. However, marking a cookie as HttpOnly prevented client-side scripts from accessing it.

Web SQL: This method mimics relational databases and SQL, allowing data to be stored and retrieved using SQL commands. Unlike cookies, Web SQL can handle larger datasets effectively.

Session Storage and Local Storage: Both of these methods involve storing data in JavaScript. The key distinction is that data in session storage gets wiped out upon page refresh or browser closure, while data in local storage persists even after refreshing the page.

For this article, I’ll be focusing more on “local storage”.

What is Local Storage?

Local storage is a technique to store information within a user's browser. It can store up to 5 MB of user data and can be accessed from any browser or window. Another thing to note is that local storage is domain-specific. In other words, you can only access the data you've saved when you're operating within the domain that houses that data.

For instance, if your website is "mytodos.com" and you've stored tasks like "read my book," "do my assignment," and "go to the market," you can only access these tasks when you visit "mytodos.com."

How Do I Access My Local Storage?

Local storage can be accessed right from your web browser since all stored data are saved across browsers in JavaScript. First, you need to go to your developer tools by pressing F12, then go to the application tab, right there, you will find your local storage (F12 – application - storage – local storage – YourprojectPath ).

Data is stored using named key/value pairs. When you store data, you assign it a key, and later, you retrieve that data using the same key.

To use local storage in Js, there are methods you need to get familiar with;

• setItem()

• getItem( )

• remove( )

• clear( )

setItem( ): This method is used to save key/value pairs in local storage. The setItem method looks like the one we have below.

localStorage.setItem("name", "Tomi");

In this example, "name" serves as the key, and "Tomi" is the associated value. This key ("name") enables us to retrieve the corresponding value ("Tomi") later using the getItem() method.

Fetching Stored Data with getItem()

const user = localStorage.getItem("name");

//Tomi

getItem( ) is used to retrieve the value associated with the specified key ("name").

It's crucial to remember that local storage can only store strings. If objects or arrays are stored directly, they appear as "[object object]" in the console. To resolve this, use JSON.stringify() and JSON.parse() to convert them to strings and back into objects, respectively.

Looking at the example below, getItem() retrieves the value associated with the specified key ("name").

const user = {
  Name: "Tomi",
 Hobby: "coding",
};
localStorage.setItem("users", user);
console.log(localStorage.getItem("users", user));

Now, when we check this in our console, we get something like this [object object]

This isn’t so useful because the real object information we need is not included. To fix this, this object has to be converted first to a string using the JSON.stringify( ) method and converted back to an object using the JSON.parse( ) method.

const user = {
  Name: "Tomi",
  Hobby: "coding",
};
localStorage.setItem("users", JSON.stringify(user));
console.log(JSON.parse(localStorage.getItem("users", user)));

Running this code, we get this in our console;

JSON.stringify( ) here has successfully converted this object into a string and we’re able to parse it back into the local storage using JSON.parse( ).

Removing Data with removeItem()

The removeItem() method eliminates the value linked to a particular key:

Now, let’s try to remove the value we got earlier;

localStorage.removeItem("users");

If we try to get this value back using getItem(), we get //Null as the result.

const user = localStorage.getItem("users");

//Null

Clearing All Data with clear()

The clear() method wipes out all data stored in local storage using localstorage.clear( ) method. This can be a little tricky. For safekeeping, consider copying and saving your code elsewhere before calling localStorage.clear(). Then, you can restore your code after refreshing the browser.

Putting It All Together

To deepen your understanding, let's build a simple input page that stores user names in local storage even after a browser refresh. Let's start with the HTML and CSS components:

<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Local storage</title>
   </head>
   <body>
     <label for="name">Your Name:</label>
    <input id="nameTag" type="text" />
    <a href="#" class="save-btn">Save</a>

    <div class="display">
      <p></p>
    </div>

    <script src="./script.js"></script>
  </body>
</html>

And our index.css looks like this, nothing serious, just some paddings and colours.

body {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 200px;
 }
 .save-btn,
 .click-btn {
   color: white;
  background-color: rgba(0, 0, 255, 0.726);
  font-weight: bold;
  padding: 10px 10px;
  text-decoration: none;
  border-radius: 5px;
  margin: 0 5px;
}
input[type="text"] {
  padding: 10px 10px;
  width: 30%;
}
.display {
  font-weight: bold;
  background-color: pink;
}

Moving on to JavaScript, initialize your variables:

const inputTag = document.getElementById("nameTag");
const saveButton = document.querySelector(".save-btn");
const Display = document.querySelector(".display");

Now that our variables have been defined, we can make the button clickable with an event listener:

saveButton.addEventListener("click", saveBtn);

Since our saveBtn doesn't exist yet, we have to define the function to save data:

function saveBtn(event) {
  event.preventDefault();
  const displayName = document.createElement("p");
  displayName.classList.add("showName");
  displayName.innerText = inputTag.value;
  Display.appendChild(displayName);
}
saveBtn();

What we’ve successfully done here is that we created another element within our HTML using createElement, added a new class and then called our HTML input value using inputTag.value and finally appended this value to the display div. Now that we can display our input value, the next step is to save this input value in our browser's local storage.

To achieve this, the first thing to do is call the DOMContentLoaded event.

document.addEventListener("DOMContentLoaded", showSavedResult);

This event runs when all the page’s DOM content has been loaded and parsed. Its target doesn’t include external resources like styles, images and so on, it sees the styles and images but doesn’t wait for them to completely load. So, this is the exact event that holds our local storage function, so it doesn’t get cleared even after the browser has been reloaded. Let’s move on to define our ‘showSavedResult’ function;

function showSavedResult() {
   let results;
   if (localStorage.getItem("results") === null) {
     results = [];
   } else {
     results = JSON.parse(localStorage.getItem("results"));
   }
   results.push(inputTag.value);
   localStorage.setItem("results", JSON.stringify(results));
}

What this code does is, it checks first if we already have an array stored in the local storage, if we don’t, it creates an empty array ( results = [ ]; ) and if we already have an array, we parse back our array and push our values into this empty array. We then set it back to a string using the setItem( ) and JSON.stringify( ) method. For this code to run successfully, we have to call our saveName function inside the main function.

function saveBtn(event){
    event.preventDefault();
   …
 showSavedResult();
}

By now, we should be seeing our arrays in the local storage, and we’ll also notice that our data doesn’t get cleared in the local storage if we try to refresh our browser.

Yes, we have successfully stored our small data in our local storage.

Conclusion

Local storage is not limited to what I’ve written above, but I hope it’s able to give you the basic understanding you need to make use of local storage. With the lesson, we should be able to set an item to the local storage, get back our item, remove our item and also get to clear all data present in the local storage. Feel free to leave a comment or share if this post was helpful to you.

via GIPHY

You’re always on a tight deadline, learning a new framework, or looking to deploy a new project ASAP. The list is endless and they all seem important. You wish you could spend more time with loved ones and have fun. I understand!

As developers, we usually don't pay attention to work-life balance, and the kudos given to spending more time in front of the screen is becoming unhealthy. I started out as a freelance copywriter and I’ll say I really struggled with time and stress management. I would spend most of the day in front of my PC and in the end feel like I haven't achieved anything for the day. Little did I know that a career transition would triple this effect.

As a web developer, working overtime is inevitable, but can be managed in a healthy way to reduce screen time. I definitely don't have it all figured out but with the little time I've spent as a developer, I've been able to pick up a few things I’ve learned along the way and I’ve decided to share some tips to help you manage stress, and also spend less time coding while getting more done.

Freelance developer work process

As a freelance developer, the daily routine mostly is to wake up, turn on your PC, code, code, eat, and code again, and these cycle repeats itself daily. It never stops.

To be a successful freelance developer, you want to be able to manage your clients, work on personal projects and still have enough time to relax and be taken care of. Here’re a few tips on how to get more done and still enjoy your free time:

Be the boss of your own time

I begin each day with a to-do list, which I prepare the night before or first thing in the morning. If you have kids, planning out your day can also mean planning what to do first between cleaning, attending to kids, and so on. It keeps you organized and focused.

So how do I do this? I organize my tasks in order of importance using an app called Todoist. A rule of thumb is that you should be real with yourself and not overthink your abilities. Try as much as possible to limit your tasks to what can be completed within 24 hours. Win the day slowly but surely.

Work with Deadlines

The human mind is tricky. It stretches to accommodate the time allocated to finish a task when it could have been completed in half the time. If you set 3 months to complete a 1-month project, it’s going to take 3 months for sure to complete. Why? You’ve convinced yourself that it’s impossible to get the project done faster.

Deadlines are super important! The code word is to START IMMEDIATELY. Even if it’s setting up a new project or creating an outline of what you’re going to do. You just have to START. Motivation comes from action. Once again, set a deadline and START.

Getting your jobs done on time means more free time. More free time, a better lifestyle.

Pomodoro technique

This technique helps you adhere strictly to timing and keeps you organized throughout the day. For every project you work on throughout the day, you work for a certain period of time (25 min preferably) and take a short break afterward. This 25 min work time is called a "Pomodoro", which is an Italian word for "tomato".

How does it work?

The process is quite simple; ---- Pick a pen and write all the tasks needed to be completed for that day, or better still, use Todoist. ----Get a timer and set for 25min. ----Focus on a single task until the timer beeps. ----Tick what you've been able to achieve for this 25min and take a 5 min break. ----Increase your rest time to 20min-25min after 4 Pomodoro. ----Repeat this process until you get all your tasks done.

If 25min is too small for you to get a lot done, you can increase your work-time to an hour and make sure to take at least take 25min break each time your timer rings. This technique is quite known among developers and has also been proven to be effective if taken seriously.

Bonus Tips: Stay Healthy and Reduce Stress

Stay Hydrated

Coding requires a lot of motivation and energy, and studies have also shown that dehydration increases fatigue and reduces motivation and energy levels. That's why taking lots of liquid while working is advisable. keeping your body system hydrated and drinking a lot of water will calm your nerves and help you reduce stress.

Another benefit of drinking a lot of water is it improves one’s memory and also helps reduce dryness which automatically causes tiredness, migraines and headaches.

If you’re not used to drinking water more often, there are few apps you can use to keep track of the amount of water that you drink and also get reminders to drink more water when you’ve not. Some of them are; Water drink reminder, water tracker, hydrillo and many others.

Take a Walk

Have you noticed that prolonged sitting for more than 8hours drops your energy level and you gradually start to lose concentration? That’s what happens when you sit for hours working without taking a break.

Sometimes, while coding and you’re stuck, instead of trying everything possible to fix that bug. Why not just relax!, take a deep breath, get up, and take a walk, somewhere quiet preferably. Stretching, playing, or taking a walk is an excellent way to boost productivity and also reduce mental fatigue.

Practice the 20-20-20 Rule

Over the years, screen time has always been an issue for programmers. I mean, we find ourselves gazing at our computer screens all day and it’s very likely you experience sore eyes, itchy eyes, blurred vision or even headaches, which are all as a result of eye strain. There’s a remedy for this. The 20-20-20 rule.

The 20-20-20 rule is basically looking 20feet away from your computer after every 20min for 20seconds. How do you even know if something is 20feet away? We are probably not going to measure the distance with a tape. What you can do is try to focus on something far away from you for 20sec, like a tree across the street or a house opposite your building. Practice this for every 20min and you’re good.

There are also free apps like Eye Care 20 20 20 that reminds you to take a break after every 20min in case you lost track of time.

Find a Hobby

Relaxing means something different for everyone. For some, it might be playing games or going to the parks and for others, it might be something entirely different. The point here is to "have fun". Do something that requires full focus (like playing video games). For me, it's movies. I make sure to watch at least a movie episode for an hour after completing a task. That way, I'm able to get my mind off anything that relates to code. You will be surprised at how much stress you're able to unload and how much bugs you're able to fix after taking some time off.

Conclusion

Work-life balance is a term developers don't really pay attention to, or maybe a number of us don't even know how to balance things up because we always find ourselves working on one task or the other. I hope reading this article will give you a clearer picture of how much free time you can have if your time is managed wisely.

Don’t hesitate to share if you find this useful. Till later. Byyeeeee.