DEV Community: topeogunleye

Building a Game Review API with Strapi 5.36.1, Rest API and Next.js 16: A Step-by-Step Guide.

topeogunleye — Sat, 29 Nov 2025 12:42:35 +0000

If you’ve ever worked with WordPress or any traditional CMS, you probably noticed that both the frontend and backend are tightly connected.

That’s great for simple setups — until you want full control over how your frontend looks and behaves. Then it becomes a pain because you have to work around WordPress themes, plugins, and templating systems.

That’s where a headless CMS comes in.

What is Headless CMS

A management system for content without a frontend meaning you only get an admin panel or backend and then you’ll decide whatever frontend technology you’ll like to use in displaying your content.

Strapi is a CMS that you can use for your backend content management because when you use strapi, you get an API that you can use on your frontend built with any frontend technology (React, Vanilla JS, Swelt, Vue).

Example:

/blogs        → Fetch all blog posts
/blogs/:id    → Fetch a single blog post by ID

You’re going to use the fetch API to make requests for the data in the endpoints above, Strapi works really well with GraphQL.

While Strapi works beautifully with GraphQL, in this guide, we will use the built-in REST API and Next.js Server Actions to fetch our data efficiently.

Prerequisites

In order to build this API, you’re going to need the following:

Knowledge of How GraphQL works.
Nodejs installed on your system.
An understanding of React and React Hooks.

Part A: Creating a New Project Using Strapi

Step 1

First on all, Create a game-review folder that will contain both your backend and frontend folders.

mkdir game-review

Step 2

Navigate into your game-review folder, then create a backend folder:

cd game-review
mkdir backend

Step 3

Run the following command into your terminal:

npx create-strapi@latest .

Step 4
Instead of manually configuring your environment, follow the official Strapi Quick Start Guide from no 2 under Step 1: Run the installation script and create a Strapi Cloud account to Step 2: Register the first local administrator user. This ensures you are using the most stable version and the latest features (like the automatic Strapi Cloud 30-day trial).

Step 5

Visit: Strapi Quick Start Guide
Action: Follow and run the commands in Part A: Create a new project with Strapi as directed*.*

Note:

To use GraphQL with Strapi, you must install the plugin. Run this in your backend folder:

npm run strapi install graphql

Your backend is live. Now that the engine is running, let’s go to Part B and build out our gaming review structure.

Part B: Build your Content Structure with Content-Type Builder

In Strapi, a Content-type acts as a blueprint. It defines exactly what fields your data should have (e.g., a "Review" needs a title and a rating). You will build a Collection Type, which allows you to create multiple entries of the same kind.

Step 1: Create a "Review" Collection Type

Navigate to your local admin panel at http://localhost:1337/admin. This is your command center for data management.

Access the Builder: Click on Content-Type Builder in the main navigation.
Initialize: Click Create new collection type.
Naming: Enter Review for the Display name and click Continue.

Step 2: Add Fields to Your Blueprint

We need to define what a "Review" looks like. Follow the table below to add the necessary fields:

Field Type	Name	Settings
Text	`title`	Advanced: Set as Required and Unique.
Number	`rating`	Format: Integer. Advanced: Required, Min: 1, Max: 10.
Rich Text	`body`	Advanced: Set as Required.

Finalize: Once all fields are added, click Finish, then click Save.
Note: Strapi will automatically restart your server to apply these changes to the database.

Part C: Create and Publish Content

Now that the blueprint is ready, let's add some data.

Go to the Content Manager in the left sidebar.
Select the Review collection type you just created.
Click Create new entry.
Fill the data: * Title: Mario Golf
- Body: [Your Review Text]
- Rating: 9
Publish: Click Save, then click Publish.

Important: In Strapi, an entry must be Published to be accessible via the API. If it is only "Saved," it remains a draft and will return a 404 error when you try to fetch it.

Step 3: Set Permissions (Making the API Public)

By default, Strapi protects your data. To allow your frontend to see these reviews, we must grant public access.

Go to Settings (⚙️) > Users & Permissions Plugin > Roles.
Click on the Public role.
Scroll to the Review section and expand it.
Check the find and findOne boxes.
Click Save.

PART D: Using Our API IN OUR NEXTJS APPLICATION:

Step 1: Initialize the Next.js Project:

Instead of manually configuring your environment, follow the official Nextjs Quick Start Guide. This ensures you are using the most stable version and the latest features.

Navigate back to your game-review folder to create the frontend, create your Next.js project.

npx create-next-app@latest frontend --use-npm # or --use-yarn

Let’s create an API route that fetches game reviews from Strapi and makes them available to our Next.js app

Create a new file named ./app/api/reviews/route.ts and add the following*:*

// Path: ./app/api/jobs/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  const res = await fetch("http://localhost:1337/api/reviews");
  const json = await res.json();

  const reviews = json.map((review: any) => ({
    ...review,
    id: review.documentId,
  }));

  return NextResponse.json(reviews);
}

List Reviews in Next.js Dashboard

Step 2: Define Typescript Interfaces for Your Game Review App:

Let's define the type structures for the review data we’ll be working with, to give us reliable typing, improved code readability, and helpful autocomplete support.

Create a file at: ./app/types/index.ts, and add the following:

export interface Review {
  id: string | number;
  documentId: string;
  rating: number;
  title: string;
  body: Array<{
    type: string;
    children: Array<{
      type: string;
      text: string;
    }>;
  }>;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
}

The Review interfaces gives structure and clarity to the data used in our frontend app:

Review: Represents a complete game review with its metadata and rich text content. It includes the review's unique identifier (id and documentId), the numeric rating score, a title, and a richly-formatted body composed of text blocks and inline elements. It also tracks three important timestamps—createdAt (when the review was written), updatedAt (when it was last modified), and publishedAt (when it became publicly visible).

Step 3: Set Up the Global Layout & Header:

Next.js uses a special file called layout.tsx to define the UI shell that wraps around all your pages. This is the perfect place to set up global fonts, SEO metadata, and shared components like your navigation bar.

Open the ./app/layout.tsx file and replace the default code with this:

import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import SiteHeader from "../components/SiteHeader";
import "./globals.css";

// Optimize Google Font loading
const poppins = Poppins({
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});

export const metadata: Metadata = {
  title: "Ninja Reviews",
  description: "A site for ninja reviews",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={poppins.className}>
        <div className="App">
          <SiteHeader />
          {children}
        </div>
      </body>
    </html>
  );
}

Here is what this code does:

Optimized Fonts: We import the Poppins font from next/font/google. Next.js automatically optimizes this at build time so the browser doesn't have to make an extra network request to Google, speeding up your load times.
SEO Metadata: The metadata object defines the global title and description for your app, which is essential for search engines and social media sharing.
Global Components: We wrap the {children} (which represents your individual pages) with a <SiteHeader /> component. This ensures your navigation bar stays consistent across every single page without needing to import it multiple times.

Creating the Site Header Component

Because we just imported <SiteHeader /> into our layout, our app will throw an error if that file doesn't exist yet. Let's build it!

Create a new folder named components in the root of your project (alongside your app folder), and inside it, create a file named SiteHeader.tsx:

What is happening here?
Instead of using a standard HTML <a> tag, we are importing the <Link> component from Next.js. This enables lightning-fast client-side navigation. When a user clicks your site title to go back to the homepage, Next.js routes them instantly without doing a full page refresh!

Step 4: Create Homepage Component

To display reviews on the Next.js frontend, we’ll update our page component.

This component will fetch the reviews data from our Strapi backend, and render a card for each review with its key details.

Open ./app/page.tsx file and Add this code:

import Link from 'next/link';
import { Review } from '../types';

// Extract text content from rich text body
function getBodyText(body: Review['body']): string {
  return body
    .flatMap((block) => block.children.map((child) => child.text))
    .join(' ');
}

export default async function Homepage() {
  // Server-side fetching! No need for useEffect or loading states.
  // Next.js handles this on the server before sending HTML to the browser.
  try {
    const res = await fetch('http://localhost:1337/api/reviews', {
      // Optional: Add caching strategies here, e.g., cache: 'no-store'
    });

    if (!res.ok) throw new Error('Failed to fetch data');

    const response = await res.json();
    const data: Review[] = response.data || response;

    return (
      <div>
        {data.map((review) => (
          <div key={review.id} className="review-card">
            <div className="rating">{review.rating}</div>
            <h2>{review.title}</h2>
            <small>console list</small>
            <p>{getBodyText(review.body).substring(0, 200)}...</p>
            <Link href={`/details/${review.id}`}>Read more</Link>
          </div>
        ))}
      </div>
    );
  } catch (error) {
    return <p>Error loading reviews $ {(error as Error).message} :(</p>;
  }
}

Here is a breakdown of what the code does:

Server-Side Fetching: Uses an async Next.js component to fetch game reviews directly, eliminating the need for useEffect and loading states.
Rich Text Parsing: Relies on a getBodyText helper function to extract and stitch together raw text from Strapi's nested array format.
Review Cards: Maps through the fetched data to display the game's title, rating, and a clean 200-character excerpt.
Error Handling: Uses a try...catch block as a safety net to gracefully display a fallback message if the Strapi API goes down.

Step 5: Create the Dynamic Details Page

Create this directory structure:

./app/details/[id]/page.tsx

The [id] folder is Next.js syntax for dynamic routes—it captures the review ID from the URL and passes it to your component.

Implementation

Here's the code for page.tsx:

import { Review } from '../../../types';

// Extract text content from rich text body
function getBodyText(body: Review['body']): string {
  return body
    .flatMap((block) => block.children.map((child) => child.text))
    .join(' ');
}

type DetailsPageProps = {
  params: Promise<{ id: string }>;
};

export default async function ReviewDetails({ params }: DetailsPageProps) {
  const resolvedParams = await params;

    // Server-side fetching! No need for useEffect or loading states.
  // Next.js handles this on the server before sending HTML to the browser.
  try {
    console.log(`Fetching review details for ID: ${resolvedParams.id}`); // Debug log to verify ID being fetched

    const res = await fetch(`http://localhost:1337/api/reviews?filters[id][$eq]=${resolvedParams.id}`, {
      // Optional: Add caching strategies here, e.g., cache: 'no-store'
    });  

    if (!res.ok) throw new Error(`Failed to fetch data: ${res.status} ${res.statusText}`);

    const response = await res.json();

    const data: Review = Array.isArray(response.data) ? response.data[0] : response;

  return (
    <div key={data.id} className="review-card">
          <h1>Review Details for ID: {resolvedParams.id}</h1>
            <div className="rating">{data.rating}</div>
            <h2>{data.title}</h2>
            <small>console list</small>
            <p>{getBodyText(data.body)}</p>
          </div>
  );
}  catch (error) {
    return <p>Error loading review details : {(error as Error).message} :(</p>;
  }
}

Here is what the code above does:

Dynamic Route Parameter: The [id] in the folder name captures the review ID from the URL (e.g., /details/123 extracts id: '123').
Server-Side Fetching: This is an async server component that fetches the review directly from Strapi before rendering—no loading states needed.
Extract the ID: The component awaits params, then uses resolvedParams.id to query /api/reviews?filters[id][$eq]=${id}.
Render the Full Review: It displays the complete title, rating, and rich text body using the getBodyText() helper function to flatten the nested body structure into readable text.
Error Handling: If the fetch fails, it displays a user-friendly error message.

This approach ensures that each review has its own permalink (e.g., /details/1, /details/2) and delivers the full content on initial page load.

Step 6: Add Basic Styling

The classes you’ve sprinkled through the JSX (className="review-card", .rating, etc.) don’t do anything until you give them some style.

Open globals.css and toss in (or merge with) a small snippet that treats each review like a card and makes the score badge stand out:

/* Note: The @import url() for Poppins was removed. We will handle it in layout.tsx */

body {
  margin: 0 30px;
  background: #f1f1f1;
}
h1,h2,h3,h4 {
  font-weight: 500;
}
.App {
  font-size: 1.2em;
  margin: 10px auto;
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #8e2ad6;
  border-bottom: 1px dotted;
}
.site-header h1 {
  font-size: 1.5em;
  color: #8e2ad6;
  padding-bottom: 10px;
  border-bottom: 2px solid;
}

/* review list */
.review-card {
  background: white;
  margin: 60px auto;
  padding: 1px 20px 20px 90px;
  position: relative;
}
.review-card .rating {
  position: absolute;
  top: -20px;
  left: -20px;
  background: #8e2ad6;
  font-size: 3em;
  width: 90px;
  height: 90px;
  text-align: center;
  color: white;
}
.review-card h2 {
  margin-bottom: 0;
}
.review-card small {
  margin-right: 10px;
  color: #777;
}

Tip: this is all in globals.css because it applies across the app; feel free to tweak spacing, colors, or add shadows to suit your taste.

With those rules in place the grid of reviews will appear as distinct cards and the rating “badge” will really pop – much nicer than plain text!

Step 7: Run the Full-Stack Application

To see your project in action, you need to have both the Strapi Backend and the Next.js Frontend running at the same time. You can do this by opening two separate terminal windows or using a process runner.

Option 1: The Manual Way (Two Terminals)

Open two terminal tabs in your root game-review folder:

Terminal 1 (Backend):Bash

cd backend && npm run develop

Admin panel will be at:

*http://localhost:1337/admin*

Terminal 2 (Frontend):Bash
```
cd frontend && npm run dev
```
Your app will be live at: http://localhost:3000

Getting Started with Next.js 15 and Strapi 5

This video provides a practical walkthrough of setting up a local environment for Next.js and Strapi 5, which perfectly complements the manual steps you've written.

Next Steps

Congratulations! You've built a full-stack Headless CMS application. To take this further, you could:

Deploy: Push your backend to Strapi Cloud and your frontend to Vercel.
Expand: Add a "Category" collection type to filter reviews by console (PS5, Xbox, Switch).
Switch to GraphQL: Now that you have the basics, try swapping the fetch calls for Apollo Client queries.

How to Install PostgreSQL 18 on Ubuntu 24.04

topeogunleye — Wed, 01 Oct 2025 11:30:30 +0000

PostgreSQL, often called Postgres, is an advanced object-relational database management system. It is used because it is free, open-source, and known for its reliability, flexibility, and strong adherence to SQL standards. Some of its common uses include transaction processing, data analytics, mobile and web applications, geospatial applications, database and application modernization, generative ai.

PostgreSQL has remained open-source since its development at Berkeley. Being open-source means that the code is completely available for viewing, modification, and distribution.

You will install PostgreSQL on Ubuntu 24.04 using this guide.

Prerequisites

Before you begin, you will need:

Ubuntu 24.04 Installed on your local machine or on a server.
A non-root user with sudo privileges.
To know how to use the Linux terminal.

Step 1 - Installing PostgreSQL

1. Update Your Package Index

Ubuntu’s default repositories come together with Postgres packages, so you can install these using the apt packaging system.

If you haven’t updated your system’s packages recently, run the command below:

sudo apt update
sudo apt upgrade

2. Add the PGDG repo

Add the PostgreSQL Global Development Group repo to get the latest stable PostgreSQL releases plus older supported versions. This will allow APT to know where to find PostgreSQL versions:

sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'

What the Command above does:

$(lsb_release -cs) → It inserts the Ubuntu codename e.g noble for Ubuntu 24.04.
pgdg → tells it to use the PostgreSQL repository for that release.

3. Import the repository signing Keys:

Import the repository signing Keys (so APT knows it can trust packages from that repo)

curl -fsSL https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo gpg --dearmor -o /etc/apt/trusted.gpg.d/postgresql.gpg

What the command above does:

curl -fsSL https://.../ACCC4CF8.asc → downloads the PostgreSQL repository signing key (a GPG key).
gpg --dearmor → converts it from ASCII-armored format into binary format that APT can use.
o /etc/apt/trusted.gpg.d/postgresql.gpg → saves it in the directory where APT looks for trusted keys.

4 Update Your Package Index again

This is to allow APT to know about the new repositories after:

sudo apt update

5. Install PostgreSQL Version 18:

This command below Installs specifically PostgreSQL Version 18

sudo apt -y install postgresql-18

Step 2 — Start, Enable, and Check Status

Start the service:

sudo systemctl start postgresql

Enable the service:

sudo systemctl enable postgresql

Check the current status:

sudo systemctl status postgresql

If the service is active, the output will show active (running).

Step 3 — Secure the PostgreSQL Database on Ubuntu (Local Machine)

sudo -u postgres psql

Modify the default postgres user with a new strong password:

ALTER USER postgres WITH ENCRYPTED PASSWORD 'strong_password';

Create a new user db_manager with a new strong password: You shouldn’t use the default user “db_manager” for daily tasks. You should create a new user (e.g., db_manager) with its own password:

CREATE USER db_manager ENCRYPTED PASSWORD 'strong_password';

Exit the PostgreSQL console:

\q

Edit the main configuration file to enable password authentication:

sudo sed -i '/^local/s/peer/scram-sha-256/' /etc/postgresql/16/main/pg_hba.conf

Restart PostgreSQL to apply changes:

sudo systemctl restart postgresql

Step 4 — Creating a New Role

1. Switching to the postgres Account

sudo -u postgres psql

2. Create a New Role

Using createuser (interactive):
Now, that you have switched to the default postgres account, you can create a new user with the command below.:

createuser --interactive

Or if you want to create a new role without switching to the postgres account, use this command below and do it directly from your terminal

sudo -u postgres createuser --interactive

With login + password:

To create a basic user that can log in, you can run

createuser new_username --interactive --pwprompt

This command will interactively ask for the role name, a password, and what privileges to grant.

Using SQL (createrole):
A role without the LOGIN attribute cannot be used to log in. They are typically used as “group roles” to bundle a set of permissions together which can then be used to grant permissions to multiple user roles simplifying permission management

CREATE ROLE new_username WITH LOGIN PASSWORD 'a_secure_password';

Note: CREATE USER is an alias for CREATE ROLE ... WITH LOGIN.

Grant Privileges (Optional) You can grant specific privileges to a role either during its creation or afterward using the ALTER ROLE command.

From your terminal, switch to a superuser account, for example: a postgres account because only a superuser can grant SUPERUSER status

Superuser Priviledge: You use the command below to bypass all permission checks for a user:

ALTER ROLE new_username WITH SUPERUSER;

Database Creation Privilege: You use the command below to allow the role to create new databases.

ALTER ROLE new_username WITH CREATEDB;

Multiple Privileges at Once: Make use of the command below to assign these attributes directly when creating the role.

CREATE ROLE new_username WITH LOGIN PASSWORD 'a_secure_password' SUPERUSER CREATEDB;

Step 5 — Creating a New Database

Only a superuser can create a database and assign ownership to another role simultaneously. You must be a superuser or have the special CREATEDB privilege.

1. Switching to the postgres Account

If you aren’t current on a postgres or superuser account. use this command to do it:

sudo -u postgres psql

2. Create a New Database

Using createdb (Shell Command):
This command is a wrapper for the CREATE DATABASE command. Use the -O (uppercase O) flag to specify the new owner. This command should be run from your server's command line, not inside the psql shell.

createdb -O new_role new_database_name

Using SQL (inside psql):
From within the psql interface, you can use the CREATE DATABASE command with the OWNER clause.

CREATE DATABASE new_database_name OWNER new_role;

By default, if you do not specify an owner, the role executing the command becomes the owner of the new database. If you need to change the owner after creation, you can use the ALTER DATABASE command.

Step 6 — Altering Databases

Similarly to the CREATE DATABASE command, Only a superuser can Alter a database, still in the supperuser account that you just used.

Change name of database

ALTER DATABASE name RENAME TO new_name;

Change the owner i.e the role that owns the database:

ALTER DATABASE name OWNER TO { new_owner | CURRENT_ROLE | CURRENT_USER | SESSION_USER }

Examples:

ALTER DATABASE mydb OWNER TO new_owner;
ALTER DATABASE mydb OWNER TO CURRENT_USER;

Move the databases file to a different storage

ALTER DATABASE name SET TABLESPACE new_tablespace;

Example:

ALTER DATABASE mydb SET TABLESPACE fast_ssd;

Refresh collation metadata used by the database to match the system libc locale/collation version.

ALTER DATABASE name REFRESH COLLATION VERSION;

Example:

ALTER DATABASE mydb REFRESH COLLATION VERSION;

Step 7 — Accessing the Postgres Prompt With New Role

Create a matching Linux user:

sudo adduser johndoe

Switch over and connect:

sudo -i -u johndoe
psql

Or:

sudo -u sammy psql

Check connection info:

\conninfo

Step 8 — Creating and Deleting Tables

Basic syntax:

CREATE TABLE table_name (
    column_name1 col_type (field_length) column_constraints,
    column_name2 col_type (field_length),
    column_name3 col_type (field_length)
);

Sample table:

CREATE TABLE animals (
    id serial PRIMARY KEY,
    perm_id VARCHAR(20) UNIQUE NOT NULL,
    species VARCHAR(50) NOT NULL,
    sex VARCHAR(10)
);

Insert sample data:

INSERT INTO animals (id, perm_id, species, sex)
VALUES
('1', '401', 'Bird', 'm'),
('2', '403', 'Cattle', 'm'),
('3', '404', 'Fish', 'f');

Query table:

SELECT * FROM animals;

Delete table:

DROP TABLE IF EXISTS animals;

Alter table:

ALTER TABLE table_name ALTER_OPTION sub_options;

Exit:

\q

Conclusion

You have successfully installed PostgreSQL on your Ubuntu 24.04 machine. There is much more to learn about PostgreSQL including and not limited to: querying data on a table, adding and deleting columns from a table, and updating data in a table.

Optimize React Performance in 2024 — Best Practices

topeogunleye — Mon, 02 Sep 2024 19:38:27 +0000

Creating dynamic user interfaces with React is both exciting and empowering. This feature-rich library has become a favorite in today's development world, offering endless possibilities to developers. But with all that power comes a bit of a catch—it's easy to get carried away and misuse features without fully considering how they might impact performance.

In this article, we’re going to learn about eight essential tips for optimizing your React applications. These strategies will help you keep your projects running smoothly and efficiently, ensuring that your apps remain robust and responsive, no matter how complex they get.

List Virtualization

Imagine you have a huge list of items. Rendering all of them at once? Not cool. It can seriously drag down your app’s performance and hog a ton of memory. But fear not—list virtualization to the rescue!

With list virtualization, you only render the items that are visible in the viewport, saving precious resources. As the user scrolls, this technique works its magic by dynamically swapping out the rendered items with new ones, keeping everything smooth and efficient. It’s like having a magic scroll that only shows what you need when you need it—perfect for handling massive lists or tables without breaking a sweat.

In the React world, there are several ways to get this magic going, with the react-virtualized library being one of the most popular.

Now, let’s move on to number two: lazy loading.

Lazy Loading Images

Lazy loading images gives your website a breath of fresh air—it’s all about loading what’s needed when it’s needed, rather than piling everything on at once. Instead of loading every image on a page during the initial load, lazy loading waits until an image is visible to the user before bringing it in. This approach not only enhances performance but also makes your app feel faster and more responsive.

Here’s how it works: when the page first loads, only a placeholder or a low-res version of the image (like a tiny thumbnail or a loading placeholder as seen above) is shown. Then, as the user scrolls and the image comes into view, the actual image is loaded and replaces the placeholder.

In React, you have a few options for implementing lazy loading. The react-lazyload library is a popular choice, offering a straightforward way to delay image loading. But if you’re feeling adventurous, you can roll your solution using the Intersection Observer API. This handy web API detects when an element enters or exits the viewport, and when combined with React’s useEffect hook, it allows you to craft a custom lazy loading strategy that’s perfectly tailored to your app.

Now, let's move on to number three: memoization.

Memoization

Memoization in React is like giving your components a memory boost, allowing them to remember the results of previous computations so they don’t have to do the same work over and over again. This is particularly handy when you're dealing with functions that are heavy on processing or get called frequently with the same inputs. By caching these results, you can skip redundant calculations and keep your app running smoothly.

There are three key tools in React for memoization: React.memo, the useMemo hook, and the useCallback hook.

React.memo: Imagine you have a component that renders based on its props. Normally, every time the parent component re-renders, the child component will too, even if its props haven’t changed. This can be inefficient, especially if rendering is resource-intensive. With React.memo, you can wrap the child component, and React will remember the result from the last render. If the props are the same, it reuses that result, saving on unnecessary re-renders.
useMemo: The useMemo hook helps you avoid unnecessary recalculations. Let’s say you have a function that crunches some serious numbers—it’s time-consuming. Without memoization, this function would run every time the component re-renders, even if the inputs stay the same. By using useMemo, you tell React to cache the result of this function and only redo the calculation if the inputs change. This way, the function result is stored and reused, boosting efficiency.
useCallback: The useCallback hook is like useMemo but for functions themselves. In React, every time a component re-renders, any functions inside it are recreated. This can be a problem when these functions are passed as props to child components because React sees them as new functions and triggers re-renders in the child. useCallback comes to the rescue by memoizing the function, ensuring it stays the same between re-renders as long as its dependencies haven’t changed. This helps avoid unnecessary re-renders in the child component.

A powerful combination is using useCallback with React.memo. While React.memo ensures the child component doesn’t re-render if its props haven’t changed, useCallback keeps the functions passed as props stable, preventing new instances of the function on every re-render. Together, they make your components even more efficient, especially when working with callbacks.

If you find this concept challenging, feel free to comment below, and I'll create a write-up that explains everything step by step in great detail.

Throttling and Debouncing Events

Throttling and debouncing are the secret weapons in your React toolkit (pun intended) for managing how often functions or event handlers are called, which can make a big difference in your app's performance.

Throttling

Throttling is all about setting a limit on how often a function can run within a certain time frame. Imagine you have a function that’s tied to a window resize event. Without throttling, this function might fire off continuously as the user resizes the window, which can be overwhelming for your app. By throttling, you can ensure that the function only runs once every, say, 200 milliseconds, no matter how many times the event is triggered in that interval. This helps prevent your app from getting bogged down by too many function calls in a short period, keeping things running smoothly.

Debouncing

Debouncing works a bit differently. Instead of limiting the frequency of function calls, debouncing delays the function until there’s a pause in the activity. Think of a search input field where you want to trigger a search function. If the function fires with every keystroke, you might end up sending a flood of API requests, which is inefficient. With debouncing, the function waits until the user has stopped typing for a certain period—like 300 milliseconds—before it runs. This way, the search function is only called when it’s really needed, cutting down on unnecessary operations.

Throttling makes sure a function isn’t called too often, while debouncing ensures it’s only called after a lull in activity. Both techniques are invaluable for handling events that can happen frequently, like scrolling, resizing, or typing, and they go a long way in keeping your app responsive and performant.

Code-Splitting

Code splitting in React is a powerful technique that enhances performance by breaking down a large JavaScript bundle into smaller, more manageable chunks. Instead of loading the entire application’s code upfront, code splitting ensures that only the necessary code for a specific part of the application is loaded when needed.

In a typical React application, all JavaScript code, including components, libraries, and other dependencies, is bundled together into a single file. As the application grows, this bundle can become quite large, leading to slower initial load times, which can negatively impact the user experience.

Code splitting addresses this issue by dividing the large bundle into multiple smaller chunks. These chunks are loaded selectively based on the current needs of the application. For example, when a user visits a specific page or triggers a particular action, only the relevant code for that page or action is fetched and executed, rather than loading the entire bundle at once.

This technique is especially useful for improving performance in larger React applications with complex and diverse features.

React Fragments

React Fragments are invisible containers that let you group multiple elements without adding any extra tags to your DOM. This is super handy when you want to keep your markup clean and avoid unnecessary wrapper elements that could clutter up your DOM tree.

Usually, when you’re rendering a list of items or a bunch of components, you might wrap them in a <div> or another container element. But every time you do that, you’re adding an extra node to the DOM, which can make it messier and even slow down rendering, especially in large applications. React Fragments let you avoid this by grouping your elements without adding any extra HTML tags.

Using Fragments keeps your DOM smaller and more efficient, which is a simple yet effective way to optimize your React components. It’s a small change that can make a big difference, especially when you’re dealing with complex, large-scale applications. So next time you find yourself reaching for a <div>, consider whether a Fragment might be a cleaner, more efficient option.

Web Workers

JavaScript is a single-threaded language, meaning it handles all tasks—such as DOM manipulation, UI interactions, API data processing, and CSS animations—on a single thread. While this design works well for many applications, it can lead to performance bottlenecks, especially when handling computationally intensive tasks that may block the main thread and cause the user interface to become unresponsive.

Web Workers provide a solution to this problem by allowing you to offload such tasks to a separate thread that runs independently of the main JavaScript thread. By running scripts in the background, Web Workers can perform long-running or resource-heavy operations without affecting the responsiveness of the UI. By offloading resource-intensive tasks to Web Workers, you can run complex calculations or process large datasets without tying up the main thread. This means your app can keep running smoothly, even when a lot is going on behind the scenes.

For example, consider an image processing application that applies filters to high-resolution images. Without Web Workers, applying a filter could cause the entire UI to freeze until the operation is complete, leading to a poor user experience. By delegating this task to a Web Worker, the main thread remains free to handle user interactions, animations, and rendering updates, resulting in a more responsive application.

Integrating Web Workers into a React application involves a few key steps. First, create a separate JavaScript file for the Web Worker script, containing the code for the resource-intensive task. Then, instantiate the Web Worker in your React component and set up communication between the main thread and the Web Worker using the postMessage and onmessage methods. This allows you to send data to the Web Worker for processing and receive the results asynchronously, without blocking the main thread.

Here’s a simple example of how to integrate Web Workers into a React application:

// myWorker.js (Web Worker script)
self.onmessage = function (event) {
  const data = event.data;
  // Perform a resource-intensive task
  const result = processData(data);
  self.postMessage(result); // Send the result back to the main thread
};

// React component (main thread)
import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [result, setResult] = useState(null);

  useEffect(() => {
    const worker = new Worker('myWorker.js');
    worker.postMessage(data); // Send data to the Web Worker

    worker.onmessage = function (event) {
      setResult(event.data); // Receive the result from the Web Worker
      worker.terminate(); // Terminate the Web Worker to free resources
    };

    return () => {
      worker.terminate(); // Clean up the Web Worker when the component unmounts
    };
  }, []);

  return (
    <div>
      <h1>Web Worker Result:</h1>
      <p>{result}</p>
    </div>
  );
}

export default MyComponent;

By incorporating Web Workers into your React application, you can enhance its performance, responsiveness, and scalability, ensuring a smooth and seamless experience for your users.

useTransition Hooks

The useTransition hook is a secret weapon in your React’s toolkit, giving you the power to update state without slowing down the UI. Imagine a scenario where a function inside a component needs to update two states at once. Normally, React bundles these updates together, making sure everything’s done before the component re-renders. This is pretty smart because it means just one render happens after all the changes, instead of two.
But what if one of those updates is a real brain-buster? React still tries to group them, which can lead to delays because the quicker update has to wait for the slower one to finish. And that’s where things can get a bit sluggish.
Enter the useTransition hook—your new best friend! With useTransition, you can tell React to prioritize certain updates by marking others as less urgent. The less critical updates still happen, but React doesn’t hold up the re-render waiting for them. This way, the important stuff gets done right away, keeping your UI snappy, while the other tasks run in the background.
By using useTransition, you can dodge the slowdown caused by heavy operations and keep your app running smoothly—even when things get complex. It’s like having a traffic cop for your state updates, making sure everything flows just right!

Conclusion

Optimizing React applications involves a combination of strategies and techniques, each targeting specific areas of performance improvement. By applying these eight essential tips—list virtualization, lazy loading images, memoization, throttling and debouncing events, code splitting, using React Fragments, and leveraging Web Workers—you can ensure that your React applications deliver a smooth, responsive, and efficient user experience.

Remember, performance optimization is an ongoing process that requires continuous monitoring, testing, and refinement. As your React applications grow and evolve, revisit these techniques and explore new ones to keep your applications running at their best.

Turbocharge Your React Apps with These 8 Essential Performance Tips

topeogunleye — Mon, 02 Sep 2024 19:19:42 +0000

Creating dynamic user interfaces with React is both exciting and empowering. This feature-rich library has become a favorite in today's development world, offering endless possibilities to developers. But with all that power comes a bit of a catch—it’s easy to get carried away and misuse features without fully considering how they might impact performance.

In this article, we’re going to explore eight essential tips for optimizing your React applications. These strategies will help you keep your projects running smoothly and efficiently, ensuring that your apps remain robust and responsive, no matter how complex they get.

1. List Virtualization

With list virtualization, you only render the items that are visible in the viewport, saving precious resources. As the user scrolls, this technique dynamically swaps out the rendered items with new ones, keeping everything smooth and efficient. It’s like having a magic scroll that only shows what you need when you need it—perfect for handling massive lists or tables without breaking a sweat.

In the React world, there are several ways to get this magic going, with the react-virtualized library being one of the most popular.

2. Lazy Loading Images

In React, you have a few options for implementing lazy loading. The react-lazyload library is a popular choice, offering a straightforward way to delay image loading. If you’re feeling adventurous, you can roll your own solution using the Intersection Observer API, combining it with React’s useEffect hook to craft a custom lazy loading strategy tailored to your app.

3. Memoization

There are three key tools in React for memoization: React.memo, useMemo, and useCallback.

React.memo: Wrap a component with React.memo to prevent it from re-rendering unless its props change. This is great for optimizing components that don’t need to update often.
useMemo: Cache the result of a function to avoid recalculating it on every render. This is useful for expensive calculations.
useCallback: Memoize a function itself, preventing unnecessary re-renders in child components that receive the function as a prop.

4. Throttling and Debouncing Events

Throttling and debouncing are essential tools in your React toolkit for managing how often functions or event handlers are called.

Throttling: Limit how often a function can run within a specific timeframe. For example, throttle a window resize event handler to run every 200 milliseconds, preventing performance issues.
Debouncing: Delay the execution of a function until there’s a pause in activity. This is perfect for optimizing input fields that trigger searches or API calls.

5. Code-Splitting

This technique is especially useful for improving performance in larger React applications with complex and diverse features.

6. React Fragments

React Fragments are invisible containers that let you group multiple elements without adding extra tags to your DOM. This keeps your markup clean and avoids unnecessary wrapper elements that can clutter up your DOM tree.

Using Fragments keeps your DOM smaller and more efficient—a simple yet effective way to optimize your React components.

7. Web Workers

JavaScript is single-threaded, meaning all tasks—such as DOM manipulation, UI interactions, API data processing, and CSS animations—are handled on one thread. This can lead to performance bottlenecks, especially with computationally intensive tasks.

Web Workers allow you to offload such tasks to a separate thread that runs independently of the main JavaScript thread. By offloading resource-intensive tasks to Web Workers, you can keep your app running smoothly, even when processing large datasets or complex calculations.

8. useTransition Hooks

The useTransition hook is your secret weapon for updating state without slowing down the UI. It allows you to prioritize certain updates by marking others as less urgent, ensuring that your app remains responsive even when performing complex operations.

By using useTransition, you can dodge the slowdown caused by heavy operations and keep your app running smoothly.

Conclusion

Ready to turbocharge your React apps? These eight performance tips are your secret weapon for making your projects lightning-fast and silky smooth. With strategies like memoization, code-splitting, and the useTransition hook, you'll take your app's performance and scalability to new heights.

We're not just talking about any optimizations here; we're talking about the essentials for crafting a user interface that's as sleek as it is speedy, all thanks to React's virtual DOM wizardry. By fine-tuning your component structure, cutting down on unnecessary re-renders, and nailing those hooks, you'll take your app's performance and scalability to new heights.

Mastering LCP: A Step-by-Step Guide to Optimizing Largest Contentful Paint for Better Web Performance

topeogunleye — Fri, 30 Aug 2024 18:12:24 +0000

Largest Contentful Paint (LCP) is one of the three Core Web Vitals metrics. Core Web Vitals are essential performance indicators that every website owner should monitor, as they significantly impact the user experience and overall performance of web pages.
Optimizing for these metrics is crucial for the long-term success of any website. Core Web Vitals are integrated across all Google tools, making them indispensable for enhancing web performance. By focusing on these metrics, you ensure a smoother, faster, and more enjoyable experience for your users, which can lead to better engagement and higher search rankings.
Do you want to know more about Core Web Vitals metrics and tips on how to optimize for them? let’s learn

Largest Contentful Paint (LCP): This metric gauges loading performance. To ensure a positive user experience, the LCP should occur within 2.5 seconds from when the page begins to load.
Interaction to Next Paint (INP): INP evaluates the responsiveness of a page to user interactions. For a seamless experience, the INP should be 200 milliseconds or less.
Cumulative Layout Shift (CLS): CLS measures the visual stability of a page by tracking unexpected layout shifts. To maintain a stable visual experience, pages should aim for a CLS score of 0.1 or lower.

First, let’s break down what LCP, or Largest Contentful Paint, is and why developers must understand its metrics and improve their scores. LCP measures the time it takes from when a user starts loading a web page until the largest image or text block within the viewport finishes rendering.

Google sets a benchmark for a good user experience by recommending an LCP score of 2.5 seconds or less for at least 75% of page visits. This means that if your page can render the largest image or text block within 2.5 seconds in 75% of user interactions, Google considers it to offer a fast and smooth loading experience. Understanding and optimizing LCP is key to enhancing performance and user satisfaction on your website.

In the chart above, each bar represents a real person’s loading experience when visiting this page. Typically, a site might have thousands or even millions of these data points, but for simplicity, we’re using an example with just 36 page visits. To find the 75th percentile from a sorted list of values like this, you simply need to identify the value that falls at 75%, or ¾, of the way through the list. In this example with 36 data points, the 75th percentile is represented by the 27th value in the list.

As we can see, this value is just under 3 seconds, which falls into the "needs improvement" category. For an LCP score to be classified as "good," it must be 2.5 seconds or less. The reason we're focusing on this is to understand the impact of performance optimizations. Imagine we implement an optimization that makes all the already fast LCP experiences even faster. Notice that while the LCP times improved for some users, as shown below:

The 75th percentile value remains unchanged. This highlights the importance of targeting optimizations that will benefit the users experiencing slower load times to truly improve overall performance.

If the site were to slightly improve the poor experiences, making them faster but still below optimal, the 75th percentile would remain unchanged:

To truly boost your LCP score at the 75th percentile, you need to enhance the experience for a significant portion of users so that at least 75% fall within the "good" threshold. The most effective strategy is to implement optimizations that improve the experience across the board, rather than focusing on a specific subset of users.

Why the Focus on LCP

Now, you might wonder why I'm zeroing in on LCP today, instead of discussing the other Core Web Vitals metrics. The reason is simple: LCP is the metric that sites struggle with the most, according to data from the Chrome User Experience Report. While 52% of sites meet the good LCP threshold, the numbers are much higher for CLS and FID:

Moreover, LCP is improving at a slower pace than the other metrics

suggesting that developers are finding it more challenging to optimize

What Makes LCP So Hard to Optimize:

There are likely many reasons why LCP is difficult to optimize, but a major factor is the sheer complexity of load performance. Developers often put in a lot of effort to improve LCP, but their attempts don't always yield the desired results. The key challenge is figuring out what specific actions will make a meaningful difference for your site.

LCP is a complex problem, but like any big challenge, it becomes more manageable when you break it down into smaller, more focused problems. That’s exactly what I propose we do with LCP.

Breaking Down LCP

In the rest of this, I’ll outline a framework for how developers can improve LCP on their sites. Let’s start by looking at a typical waterfall chart from a page load, which includes CSS, JavaScript, and image resources. While all these network requests are important, when it comes to optimizing LCP, you really need to focus on just two: the HTML document and whatever other resource is required to render the LCP element.

While all network requests during a page load are important, when it comes to optimizing LCP, the focus should primarily be on two key resources: the HTML document and whatever additional resource is necessary to render the LCP element.

In this case, the LCP element is an image, but the same principle applies to a text node that requires a web font before it can render. Once we've pinpointed these two crucial resources, we can use their timing attributes to break down LCP into its most significant subparts. The first subpart is the time from when the user initiates the page load to when the browser receives the first byte of the HTML document response—this is known as the Time to First Byte (TTFB).

TTFB is critical because it marks the first moment the browser can start identifying additional resources needed to render the page, including those necessary for the LCP element. Understanding and optimizing TTFB is a foundational step in improving your LCP score.

The second subpart of LCP is the LCP resource load delay—

the time between TTFB and when the browser starts loading the resource needed for LCP. In some cases, like when the LCP element is a text node using a system font, no additional resources are needed, so the resource load delay is zero. Ideally, you want this delay to be as small as possible.

The third subpart is the time it takes to load the LCP resource. Again, if your LCP element doesn’t require an external resource, this time will be zero.

Lastly, the fourth subpart of LCP is the element render delay—the time from when the LCP resource finishes loading to when it’s rendered on the screen.

Each page’s LCP can be broken down into these four subparts, with no overlap or gaps between them. Together, they add up to the total LCP time. For example, if we reduce the resource load time, the element render delay might extend by the same amount, meaning the overall LCP doesn’t change.

This happens because the page might be waiting for JavaScript (those yellow bars at the bottom) to load before adding the LCP element.

This point is crucial and often a source of frustration for developers. When seeking advice on improving LCP, one of the most common suggestions is to optimize images. However, optimizing images only affects one part of LCP. If this part isn’t your bottleneck, then reducing it won’t improve your score, as seen in this example.

Best Practices Within Each Subpart of LCP

The key to improving LCP is identifying where your bottlenecks are. To do this, it’s helpful to know the ideal or recommended values for each LCP subpart. At a high level, the advice is straightforward.

High-Level Goals: Optimizing LCP Timing

When optimizing for LCP, your main objective is clear: spend most of your time on the network requests necessary to render the LCP element. Anything that delays the start of loading the LCP resource or slows down rendering after the resource is loaded is essentially wasted time.

In an ideal scenario, here’s how these LCP subparts should break down on a well-optimized page:

The total time on the right is based on the goal of a 2.5-second LCP, with other times proportionally distributed. Notice that around 80% of the time is dedicated to network requests, while only 20% is allocated to everything else. Later, I’ll walk you through a real-world example of a performance optimization, using this 80-20 principle to pinpoint improvement opportunities.

Real-World Data Insights

Curious about how time is spent across LCP subparts in real-world sites? While we don’t have real user data for these specific metrics, we do have lab data from the HTTP Archive. This data comes from 5.3 million web page test runs, focusing on pages where the LCP element was an image with a URL source.

Here’s how the data breaks down:

I sorted all runs by LCP value, from fastest to slowest, and divided them into five buckets. The top bucket represents the fastest 20% of pages, while the bottom represents the slowest 20%. For each bucket, I averaged the LCP subpart times to create stacked bars, where the total length represents the average LCP value in that bucket.

A Surprising Discovery

When I first saw this data, I was surprised. I expected the majority of LCP time would be spent loading large, unoptimized images—anticipating those green bars to dominate, especially in the slowest bucket. However, the data suggests that image load times might not be the main bottleneck. Instead, the purple segments, representing resource load delay, appear to be the biggest issue.

Now, keep in mind that this is lab data, not real-world data. The tests use a single network and device configuration for each run, so it’s not fully representative of the diverse devices and networks used in real life. Additionally, HTTP Archive tests don’t account for repeat visits, meaning the user’s cache state isn’t factored in. While we can’t definitively say this is how LCP breakdowns look in the wild, it’s clear that sites could be doing a better job optimizing LCP resource loads.

Optimism Amid Challenges

Despite these challenges, there’s reason for optimism. The subparts of LCP that are hardest to improve—represented by the blue and green segments—are fewer in number. The purple and yellow segments, representing the parts of LCP that are easiest to improve, show ample opportunity for enhancement. By helping developers identify their bottlenecks, we could see significant improvements in LCP across the board.

Recipe for LCP Optimization: A Step-by-Step Approach

There are only four steps to optimize LCP, ordered by ease and impact:

Step 1: Eliminate Unnecessary Resource Load Delay

The key here is to prioritize the LCP resource so it starts loading immediately after the HTML document is received. To check if your page’s LCP resource is loading early enough, compare its request start time with the start time of the first sub-resource.

If the LCP image starts loading later than, say, a stylesheet starts loading before it, that’s a sign there’s room for improvement. You can fix this by using preload or adding priority hints to the image tag, prompting the browser to start loading it sooner. Also, ensure the LCP image isn’t lazy-loaded, as that could introduce unwanted delays. Preloading the image should solve this issue.

Here’s what happens after implementing these changes:

Now, the image resource starts loading simultaneously with the first stylesheet, exactly as intended. Step one is done. But remember, reducing resource load delay won’t necessarily improve LCP if it’s still blocked by JavaScript, as mentioned earlier.

Tips:

Add priority hints or preload
Minimize network connections
Use same-origin resources (if possible)

Step 2: Eliminate Unnecessary Element Render Delay

To optimize LCP, it's crucial to ensure that once the LCP resource finishes loading, nothing else on the page delays its rendering. Any delay here can prevent the LCP element from appearing as quickly as possible.

Tips:

Remove or minimize render-blocking stylesheets.
Defer render-blocking JavaScript.
Use font-display: optional for web fonts.

Example:
One way to reduce render times is by optimizing the size of the JavaScript files being loaded. Techniques like minification and tree shaking can reduce script download times, improving overall performance.

While this is an improvement, it’s still not ideal. The goal is to eliminate anything that blocks rendering after the LCP resource finishes loading, not just reduce blocking time. For instance, if the JavaScript code is client-side rendering the application, updating the framework to use server-side rendering or pre-rendering pages as static files can prevent JavaScript from blocking the LCP image render.

With this update, the JavaScript code no longer blocks rendering, allowing the LCP image to appear immediately after it’s downloaded.

Step 3: Reduce Resource Loading Time

The third step is to minimize the resource load time as much as possible by following best practices for optimizing images and web fonts. Anything that reduces the file size of the resource will help reduce load times.

Tips:

Compress images.
Use modern image formats like AVIF or WebP.
Properly sized images.
Set far-future cache expiry headers.
Use a CDN to reduce network distance.

Example:
In the example above, optimizing the LCP resource so much that it becomes smaller than the stylesheet can lead to the stylesheet blocking rendering. To prevent this, consider techniques like critical CSS or removing unused styles where possible. Alternatively, you can inline CSS into the document, though this might have negative effects on performance for repeat visitors.

The best approach is to reduce the size of the stylesheet so it’s smaller than the LCP resource, ensuring it’s not blocking or rarely blocking, which is a good compromise.

In this case, slightly reducing the stylesheet’s size is enough to prevent it from blocking the LCP image’s rendering.

Step 4: Reduce Time to First Byte (TTFB)

The final step, reducing TTFB, is often the hardest for developers to optimize and typically the one with the least control. However, having a good TTFB is critical because it impacts everything that follows.
Here is a Visual Illustration of improving TTFP:

Tips:

Use a CDN to reduce network distance, getting servers closer to users.
Upgrade server hardware for faster processing.
Ensure the response body can be streamed.

Improving TTFB will directly enhance every subsequent step, as nothing can happen on the front end until the back end delivers the first byte of the response.

Recap:

Start Early: Ensure the LCP resource starts loading as soon as possible.
Render Immediately: Ensure the LCP element can render immediately after its resource finishes loading.
Reduce Load Times: Minimize the load time of the LCP resource without compromising quality.
Deliver Fast: Deliver the initial HTML document as quickly as possible.

By following these four steps, you can ensure an optimal loading experience for your users, which should be reflected in improved real-world LCP scores.

Conclusion

Optimizing the Largest Contentful Paint (LCP) is like setting the stage for a great first impression on your website. Imagine your visitors arriving at your site, eager to see what you have to offer. The speed at which the main content loads plays a huge role in whether they stick around or leave. By honing in on four key areas—getting the most important content to load early, avoiding any delays in rendering, speeding up resource load times, and cutting down the time it takes to get the first bit of data to the browser—you can make sure your site performs at its best.

These steps aren’t just about making small tweaks here and there. It’s about creating a smoother, faster experience that all your users will appreciate. When you get these optimizations right, you’re not just improving a single metric; you’re boosting the overall experience, making your site feel faster and more responsive. In the long run, this means happier users, better satisfaction, and stronger LCP scores. By carefully identifying and tackling performance bottlenecks, you can ensure your site remains speedy and robust, even as new challenges arise.

Redis for Beginners (Part 2 of 2)

topeogunleye — Thu, 25 Jul 2024 14:15:40 +0000

Welcome back to the second part of our Redis for Beginners series. In Part 1, we covered some basic setups of a Redis database and a couple of fundamental commands. In this second part, we will further explore advanced options for commands while deeply focusing on the difference between lists and sets in Redis.

Command Options

Not all commands have options, but a few, for example, SET, have certain added features that can be essential.

EX seconds: Sets an expiration time in seconds (must be a positive integer).
PX milliseconds: Sets an expiration time in milliseconds (must be a positive integer).
EXAT timestamp-seconds: Sets a specific Unix timestamp for expiration (must be a positive integer).
NX: Sets the key only if it does not already exist.
XX: Sets the key only if it already exists.

Note: You can't use NX and XX together because they will conflict with each other. Also, you can use only one option for expiration (EX or PX) at a time.

To learn more about the SET command visit here to check out the Redis documentation page.

Example: SET Command Using the EX Option

When executing the following at your workbench, you will define a key with an expiration in Redis:

SET key value EX seconds

Replace key with the name of the key that contains the string and value with the new value you would like to store. Replace seconds with the amount of time, in seconds, after which the key should expire.

For example: if you want to set your name value to "Yoshi", and you want it to expire after 7 seconds, run:

SET name carint EX 7

This command updates the value of name to "Yoshi" and sets an expiration of 7 seconds from the time the command is executed.

Example: SET Command with NX and XX Options

You can set the key conditionally concerning its existence in Redis by using the options NX, which stands for Not eXists, and XX, which stands for eXists, in the SET command:

Using NX (Not eXists) Option:

SET key value NX

Replace key with the name of the key you want to set and value with the value you want to store in the key. This command sets the value of key to value only if key does not already exist. If key already exists, the command will not perform any action.

Example:

If you want to set a new key username to "alice" only if username does not already exist, you would use:

SET username alice NX

Using XX (eXists) Option:

SET key value XX

This command sets the value of key to value only if key already exists. If key does not exist, the command will not perform any action.

Example:

If you want to update the value of an existing key username to "bob" only if username already exists, you would use:

SET username bob XX

Lists vs. Sets

Lists

An ordered collection of strings.
Supports operations like adding elements to the head or tail, trimming based on ranges, etc.
Useful for maintaining ordered data structures.
Commands: RPUSH, LPUSH, LRANGE, LPOP, RPOP, etc.

Sets

An unordered collection of unique strings.
Supports operations like adding, removing, and checking membership.
Useful for storing unique items and performing set operations.
Commands: SADD, SREM, SMEMBERS, SISMEMBER, etc.

When deciding between lists and sets, consider the order requirements and the need for uniqueness in your data.

RPUSH: Adding Elements to the End of a List

To add one or more elements to the end of a list, use the RPUSH command. Here’s how to use it in your workbench:

RPUSH key element [element ...]

Replace key with the name of the list, and element with the elements you want to add.

For example:

Create a list named fruits and add elements to it:

RPUSH fruits apple banana cherry

This will add "apple", "banana", and "cherry" to the end of the fruits list.

LPUSH: Adding Elements to the Beginning of a List

To add one or more elements to the beginning of a list, use the LPUSH command. Here’s how to use it in your workbench:

LPUSH key element [element ...]

Replace key with the name of the list, and element with the elements you want to add.

For example:

Add elements to the beginning of the fruits list:

LPUSH fruits mango orange

This will add "mango" and "orange" to the beginning of the fruits list.

LRANGE: Retrieving Elements from a List

To retrieve a range of elements from a list, use the LRANGE command. Here’s how to use it in your workbench:

LRANGE key start stop

Replace key with the name of the list, start with the starting index, and stop with the ending index.

For example:

Retrieve elements from the fruits list:

LRANGE fruits 0 2

This will return the first three elements: "mango", "orange", and "apple".

LPOP: Removing the First Element from a List

To remove and return the first element of a list, use the LPOP command. Here’s how to use it in your workbench:

LPOP key

Replace key with the name of the list.

For example:

Remove the first element from the fruits list:

LPOP fruits

This will remove and return "orange".

RPOP: Removing the Last Element from a List

To remove and return the last element of a list, use the RPOP command. Here’s how to use it in your workbench:

RPOP key

Replace key with the name of the list.

For example:

Remove the last element from the fruits list:

RPOP fruits

This will remove and return "cherry".

SADD: Adding Elements to a Set

To add one or more elements to a set, use the SADD command. Here’s how to use it in your workbench:

SADD key member [member ...]

Replace key with the name of the set, and member with the elements you want to add.

For example:

Create a set named colors and add elements to it:

SADD colors red green blue

This will add "red", "green", and "blue" to the colors set.

SREM: Removing Elements from a Set

To remove one or more elements from a set, use the SREM command. Here’s how to use it in your workbench:

SREM key member [member ...]

Replace key with the name of the set, and member with the elements you want to remove.

For example:

Remove elements from the colors set:

SREM colors blue

This will remove "blue" from the colors set.

SMEMBERS: Retrieving All Elements from a Set

To retrieve all the elements of a set, use the SMEMBERS command. Here’s how to use it in your workbench:

SMEMBERS key

Replace key with the name of the set.

For example:

Retrieve all elements from the colors set:

SMEMBERS colors

This will return all elements in the colors set: "red" and “green”.

SISMEMBER: Checking if an Element Exists in a Set

To check if an element is a member of a set, use the SISMEMBER command. Here’s how to use it in your workbench:

SISMEMBER key member

Replace key with the name of the set, and member with the element you want to check.

For example:

Check if "red" is in the colors set:

SISMEMBER colors red

This will return 1 if "red" is a member of the set, and 0 otherwise.

Hashes in Redis

In Redis, hashes are maps between string fields and string values. They are ideal for representing objects or entities with multiple attributes. Unlike sets or lists, which hold single values, hashes store key-value pairs where both the field and the value are strings.

Example: Using HSET Command for Hashes

The HSET command sets a field in the hash stored at key to a specified value. If the key does not exist, it creates an empty hash.

HSET key field value

Replace key with the name of the hash.
Replace field with the attribute to change.
Replace value with the new value to assign.

Example: Setting Fields in a Hash

Create a hash user:1001 representing a user with attributes:

HSET user:1001 username alice email alice@example.com

This command sets username to "alice" and email to "alice@example.com" in the hash user:1001.

Example: Using HGET Command for Hashes

The HGET command retrieves the value of a field from the hash stored at key.

HGET key field

Replace key with the name of the hash.
Replace field with the specific field whose value you want to retrieve.

Example: Getting Fields from a Hash

To retrieve the username and email fields from the user:1001 hash:

HGET user:1001 username
HGET user:1001 email

These commands will return "alice" and "alice@example.com" respectively.

Example: Using HDEL Command for Hashes

The HDEL command deletes one or more fields from the hash at key.

HDEL key field [field ...]

Replace key with the name of the hash from which fields are removed.
Replace field with the field(s) to remove.

Example: Removing Fields from a Hash

To remove the email field from the user:1001 hash:

HDEL user:1001 email

The email field will be removed from the user:1001 hash.

Conclusion

Redis has evolved significantly, positioning itself not just as a caching layer but as a primary database. It offers data persistence, replication for durability and availability, JSON support, and search modules for storing and querying complex data. Redis OM, an Object mapping library, simplifies usage. This series focuses on Redis's core capabilities.

This format organizes the content into sections with headings, subheadings, and clear examples, suitable for readability and reference in Notion.

Redis for Beginners (Part 1 of 2)

topeogunleye — Thu, 25 Jul 2024 14:13:17 +0000

Redis has come a long way; now, it can be placed as your primary database—not just a cache layer. It features added data persistence and replication for durability and availability. Additional JSON support and search modules make it easier to store and query more complex data. Now, Redis has an Object mapping library, Redis OM, which simplifies things.

In this two-part series, the focus is on the core of Redis. This is the first part, which will guide you through setting up a Redis database and using some basic commands.

Setting Up a Redis Database

On a Macbook, use Homebrew

First, make sure you have Homebrew installed. From the terminal, run:

brew --version

If this command fails, you'll need to follow the Homebrew installation instructions.

Installation

From the terminal, run:

brew install redis

After running the above command, the following output is usually displayed:

==> Downloading <https://homebrew.bintray.com/bottles/redis-6.2.6.catalina.bottle.tar.gz>
==> Downloading from <https://d29vzk4ow07wi7.cloudfront.net/xxxxx/redis-6.2.6.catalina.bottle.tar.gz>
######################################################################## 100.0%
==> Pouring redis-6.2.6.catalina.bottle.tar.gz
==> Caveats
To have launchd start redis now and restart at login:
  brew services start redis
Or, if you don't want/need a background service you can just run:
  redis-server /usr/local/etc/redis.conf
==> Summary
🍺  /usr/local/Cellar/redis/6.2.6: 1,204 files, 9.6MB
==> `brew cleanup` has not been run in 30 days, running now...
Removing: /usr/local/Cellar/old_formula/old_version... (xMB)
...
Removing: /Users/username/Library/Caches/Homebrew/old_formula--old_version... (xMB)
...
==> Caveats
==> redis
To have launchd start redis now and restart at login:
  brew services start redis
Or, if you don't want/need a background service you can just run:
  redis-server /usr/local/etc/redis.conf

This will install Redis on your system.

On Windows, use WSL

Installation

From Powershell, run:

wsl --install

After running the above command, the following output is usually displayed:

==> Starting Installation:
Installing: Virtual Machine Platform Virtual Machine Platform has been installed.
==> WSL Installation:
Installing: Windows Subsystem for Linux
Windows Subsystem for Linux has been installed.
==> Downloading and Installing Linux Distribution:
Downloading: [Distribution Name]
Installing: [Distribution Name]
==> Setting WSL2 as the Default Version:
Setting WSL 2 as the default.
Installation successful.
==> Prompt to Reboot:
The requested operation is successful. Changes will not be effective until the system is rebooted.

Microsoft provides detailed instructions for installing WSL. Once you're running Ubuntu on Windows, you can follow the steps detailed at Redis Site Installation Steps which are the same steps for installing Redis on Linux to install recent stable versions of Redis from the official packages.

Using Redis Cloud

The last option for installing Redis is called Redis Cloud, and that's what you’ll be using here. It allows you to set up a Redis database online. It also comes with Redis insights that can be used to test different commands and visualize your stored data.

To use the Redis database online, follow the steps below:

Sign Up for a Free Redis Account:
- Visit the Redis website (https://redis.io/) and sign up for a free account.
- Provide the necessary details and create your account.
Create a Subscription:
- Once logged in, navigate to the “Subscriptions” section (usually found in the left-hand menu).
- Click on “New Database” or a similar option.
- Scroll down and select the free tier, which typically comes with 30MB of storage.
- Click on “Create Database.”
Download the Redis App:
- To work with Redis locally, download the Redis app for your system (Windows, macOS, or Linux).
- Install the app following the instructions provided.
Connect to Your Database:
- After creating the database, find the “Connect” option and click on it.
- Click on the "Open with RedisInsights" button. This will launch your installed Redis application.

Basic Commands

When using your RedisInsights application, navigate to your workbench. You can access your workbench by clicking on this icon:

SET: Using the SET Command to Set a Key-Value Pair

To set a key-value pair in Redis, follow these steps:

In your workbench input section, type the following command:

SET key value

Replace key with the name of the key you want to set, and value with the corresponding value you want to assign to that key.
Press CTRL + Enter to execute the command.

For example, executing SET name charlie will set the value "maria" for the key name.

You should receive the message "OK" in the output section below, confirming that the key-value pair was successfully set.

To verify, go back to the Redis browser, switch to the data view, and refresh the view to see the updated key-value pair.

Error Handling:
If you include a space in your data without quotes, you’ll get a syntax error. To include spaces, enclose the data in quotes.

Example:

SET name "Xhun li"

GET: Retrieving a Value by Key

To retrieve the value of a specific key, use the GET command. In your workbench, type:

GET key

Replace key with the name of the key you want to retrieve.

For example, if you have a key named name with the value "Xhun li", executing GET name will return "Xhun li". Press CTRL + Enter to execute the command.

SET MULTIPLE: Setting Multiple Key-Value Pairs

To set multiple key-value pairs simultaneously, use the MSET command. In your workbench, use:

MSET key1 value1 key2 value2 key3 value3

Replace key1, key2, key3, etc., with the names of the keys you want to set, and value1, value2, value3, etc., with their respective values.

For instance:

MSET name1 maria name2 yoshi color green rating 10

This command sets the keys name1, name2, color, and rating with their respective values. Press CTRL + Enter. Ensure the key comes first, followed by the value.

DEL: Deleting Keys

To delete one or more keys and their associated values, use the DEL command. In your workbench, type:

DEL key1 key2 key3 ...

Replace key1, key2, key3, etc., with the names of the keys you want to delete.

For example:

DEL name1 name2

Executing this command will delete the keys name1 and name2 along with their respective values. The command will return an integer indicating the number of keys deleted. For instance, a response of 2 indicates that two keys were successfully deleted. Press CTRL + Enter to execute the command.

GET MULTIPLE: Retrieving Multiple Values

To retrieve values for multiple keys at once, use the MGET command. In your workbench, use:

MGET key1 key2 key3

Replace key1, key2, key3, etc., with the names of the keys you want to retrieve.

For example:

MGET name color rating

This command will return the values associated with keys name1, name2, and rating. Press CTRL + Enter. The values "Xhun li", "green", and "10" will be returned in the output section.

GETRANGE: Retrieving Substrings

To retrieve a substring of a value stored in a key, use the GETRANGE command. Here’s how to use it in your workbench:

GETRANGE key start end

Replace key with the name of the key, start with the starting index, and end with the ending index.

For example:

Set a key named name with the value "christopher":
```
SET name christopher
```
Retrieve the first five letters of "christopher" with the following command:
```
GETRANGE name 0 4
```

This will return the substring "Chris".

Conclusion

In this first part of our Redis for Beginners series, you learned how to set up a Redis database and run basic commands such as setting, getting, deleting, and retrieving multiple key-value pairs. These are basic skills that anyone working with Redis should be conversant with.

In the next part of this series, we will explore more advanced commands, and command options, and go into the differences between lists and sets in Redis. Stay tuned!

Understanding CSS Percentage Values

topeogunleye — Thu, 25 Jul 2024 14:10:25 +0000

Have you ever wondered why a percentage value isn’t working as expected in your CSS? Let’s explore some common scenarios where percentage values can be tricky.

A brief overview of CSS percentage values:

CSS percentage values are relative units that allow you to specify sizes and positions as a proportion of the containing element.
They are commonly used to create flexible, responsive designs for layout purposes.

When using percentages in CSS, the reference point must be identified. Often, this reference is thought to be the parent element of the one to which the percentage is applied. While this is generally true, it's not always the case. The correct reference is the "containing block," which may not necessarily be the direct parent element but any ancestor element that provides the context for the percentage value. Misunderstandings can arise when percentages are expected to be relative to a different dimension or element than they are.

Calculating percentage values from the containing block:

Box model properties and offset properties calculate their CSS percentage values as:
- The height, top, and bottom properties compute percentage values from the height of the containing block.
- The width, left, right, padding, and margin properties compute percentage values from the width of the containing block.

Common scenarios where percentage values may not work as expected:

Percentage values can behave differently depending on the property they are applied to:
- Font-size: Percentages are relative to the parent element’s font size.
- Transform: Percentages refer to the element’s dimensions.
- Width, Padding, Margin: Percentages are relative to the parent element’s dimensions.
Layout issues often occur when the parent element's dimensions aren't explicitly defined or when intrinsic sizing rules come into play. For instance, let's say you have a parent container without explicitly defined dimensions and a child element that uses percentage-based width and height. In such cases, the child element may not size correctly because the parent's size isn't defined:

1. Padding Top 20%

When you set padding-top: 20%, this value resolves to 20% of the parent element’s width, not its height. This can often lead to unexpected layouts if you’re assuming it’s relative to the height.

Example Scenario and Potential Layout Issues:

In this example, the padding-top of the .child element will be 20% of the .parent element’s width (40px), not its height (20px). This might not be the intended behavior and can lead to unexpected layouts.

Potential Layout Issues: The padding-top for the .box is calculated as 20% of the .container's width (300px), which results in 60px of padding. If you were expecting the padding to be relative to the height of the .container (200px), you would anticipate 40px of padding instead. This discrepancy can lead to unexpected layout issues, especially if you are not aware that padding percentages are based on the parent's width.

2. Font Size

Percentage values for font-size are relative to the font-size of the parent element. So, if you set font-size: 150%, it will be 1.5 times the size of the parent’s font-size.

When you use percentage values for font-size, they are calculated relative to the font size of the parent element. This means that the computed font size of a child element will scale proportionally based on the parent element’s font size.

Example Scenario:

In this example:

The .parent element has a font size of 16px.
The .child element’s font size is set to 150%, which is 1.5 times the parent’s font size.

Result:

The computed font size of the .child element will be 24px (16px * 1.5).

This demonstrates how percentage-based font sizes scale relative to their parent element, ensuring consistent and proportional text sizing within a hierarchy of elements.

3. Transform Translate

When using transform: translate(), the percentage values are relative to the element’s dimensions, not its parent’s.

Explanation: When you apply transform: translate() with percentage values, these percentages are calculated based on the dimensions of the element itself, not the parent. This can take you by surprise and you might expect the translation to be relative to the parent element.

Example Scenario:

https://codepen.io/topeogunleye21/pen/rNEObeX

In this example:

The .container element has a width of 300px and a height of 200px.
The .box element has a width of 100px and a height of 100px.
The transform: translate(50%, 50%) on the .box translates it by 50% of its width (50px) and 50% of its height (50px).

Result:

The .box element will be shifted 50px to the right and 50px down from its original position.
This behavior can be unexpected if you assume the translation is relative to the parent element's dimensions.

Why Isn’t body { height: 100% } Filling the Viewport?

The reason body { height: 100% } doesn’t fill the viewport is because the body element isn’t the first element in the document. It’s easy to think of the body as the top-level element, but it’s actually inside the html element, also known as the root element.

Explanation of the hierarchy of HTML and body elements:

In an HTML document, the body element is nested inside the html element. This means that for the body to fully utilize the viewport height, the html element also needs to be set to 100% height.

Steps to ensure body height fills the viewport:

Set html height to 100%:

html {
  height: 100%;
}

Set body min-height to 100%:

body {
  min-height: 100%;
}

This is a crucial step and should be included in your CSS reset. Setting the html height to 100% ensures that the body can then have a minimum height of 100% of the viewport. By doing this, the body element can properly resolve to 100% of its parent’s height (the html element), which now has a defined height.

By understanding these nuances, you can better control your layouts and ensure your CSS works as expected. Happy coding!

Viewport Units

Another solution to sizing issues in CSS is using viewport units instead of percentages. Viewport units provide concrete values based on the size of the viewport, offering a more reliable approach. Here’s how you can think about it:

When you don't have any content in the body, it might not fill the entire viewport. Content determines the intrinsic height of an element. To address this, you can use vw (viewport width) and vh (viewport height) units. For example, you can set an element's height to 100vh to make it equal to the height of the viewport.

Introduction to viewport units (vh, vw):

vh (Viewport Height): 1vh is equal to 1% of the height of the viewport.
vw (Viewport Width): 1vw is equal to 1% of the width of the viewport.

Benefits and use cases:

Viewport units are particularly useful for creating responsive designs that need to adapt to different screen sizes.
They provide a more consistent and predictable sizing mechanism compared to percentages, which can be affected by the parent element's dimensions.

Example:

In this example, the full-height section uses height: 100dvh, which adjusts its height based on the viewport height dynamically. This ensures that the section always fills the entire height of the viewport, even if the viewport size changes (e.g., due to a mobile device's browser header appearing or disappearing).

Introduction to dynamic viewport units (svh, lvh, dvh, dvw):

svh (Small Viewport Height): Based on the smallest possible height of the viewport.
lvh (Large Viewport Height): Based on the largest possible height of the viewport.
dvh (Dynamic Viewport Height): Adjusts dynamically based on changes in the viewport, such as the appearance of a header on mobile devices.
dvw (Dynamic Viewport Width): Adjusts dynamically based on changes in the viewport width.

By using viewport units, you can achieve more reliable and responsive layouts that adapt to different screen sizes and conditions. These units offer a robust alternative to percentages, providing more consistent and predictable results.

Handling Different Device Types

Using dynamic viewport units like dvh can be particularly useful for projects where you want the html element to stretch to 100% of the dynamic viewport height. This is ideal for layouts with fixed headers and footers, ensuring the content area fills the remaining space.

Steps to ensure the content area fills the remaining space:

Use Dynamic Viewport Units: Utilize dvh to make sure the content area adapts to changes in the viewport.
Set HTML and Body to 100%: Ensure both html and body elements stretch to the full height of the viewport.
Adjust Content Height: Use min-height and dvh units to make sure the content area fills the remaining space between the header and footer.

Example Scenario:

Explanation:

Header and Footer: Both are fixed at the top and bottom of the viewport, respectively.
Content Area: The min-height is set using calc(100dvh - 2 * 3rem), which ensures that the content area fills the remaining space after accounting for the height of the header and footer. The height of the header and footer are both 3rem, so the calculation adjusts accordingly.
Dynamic Viewport Units: By using 100dvh, the content area adapts to changes in the viewport height, ensuring a responsive design.

This approach ensures that the content area dynamically adjusts its height, filling the space between the fixed header and footer, making the layout adaptable to different device types and viewport changes.

Absolute and Fixed Positioning

If you have elements that are absolutely or fixed positioned, using viewport units (vh or vw) instead of percentages can help maintain their size relative to the viewport. To explain the use of dvh (Dynamic Viewport Height) with an example where something very important, like a notification or a footer, must be stuck to the bottom of the viewport, we'll use a layout that includes a header, a main content section, and a footer that always sticks to the bottom of the viewport.

HTML and CSS

Explanation

HTML Structure: The layout includes a header, a main content section, and a footer.
CSS Styling:
- The header is styled to take up 10vh (10% of the viewport height).
- The .main-content section has a min-height of 80dvh (80% of the dynamic viewport height). This ensures that the main content section takes up at least 80% of the viewport height, adjusting dynamically to changes in the viewport size.
- The footer is positioned fixed at the bottom with a height of 10dvh (10% of the dynamic viewport height). This ensures that the footer always stays at the bottom of the viewport, regardless of the content height in the main section.

Benefits of Using dvh

Dynamic Adjustments: The dvh unit adjusts dynamically based on changes in the viewport, such as the appearance of on-screen keyboards or browser toolbars, especially on mobile devices.
Consistent Layout: Ensures that important elements like footers remain consistently positioned relative to the viewport, providing a reliable user experience.
Flexibility: Allows for more flexible and adaptive designs that respond well to different device types and viewport changes.

Limitations of Viewport Units

Viewport units don't account for the scrollbar, which can lead to slight inaccuracies in sizing. Despite this, they are generally easier to work with in stylesheets compared to percentages. However, there are several limitations and potential issues to be aware of:

Sizing Inaccuracies

Scrollbars: When a scrollbar appears, it reduces the usable width of the viewport. Viewport units like vw (viewport width) don't account for this, potentially causing content to overflow or misalign.
Fixed and Absolute Positioning: Elements positioned with viewport units can behave unexpectedly when scrollbars appear, as their size remains constant relative to the viewport but not to the available content area.

Managing Sizing Inaccuracies

Media Queries: Use media queries to adjust styles for different viewport sizes and conditions. This can help manage issues arising from scrollbars and ensure a more consistent layout.
Box-Sizing and Overflow: Set the box-sizing property to border-box and use overflow: auto or overflow: hidden to control how content behaves within its container, minimizing the impact of scrollbars.

For example:

html, body {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    overflow: auto;

}

Font Size and Zooming

Viewport Units for Text: Using viewport units for text sizes can cause issues when users zoom in. As the viewport width remains constant, the text size doesn't increase proportionally, making it difficult to read.
Using Clamp: Instead of using viewport units for text, use the clamp function to ensure text remains readable and scales appropriately with zoom.

For example:

body {

    font-size: clamp(1rem, 2vw + 1rem, 3rem);

}

Example Scenario

Explanation

Text Scaling with Clamp: The text inside the .content div uses the clamp function to ensure it scales properly with viewport changes and zooming, maintaining readability.
Fixed Element: The .fixed-element div at the bottom of the viewport remains fixed in place, demonstrating how viewport units can maintain positioning while accommodating content changes and scrollbars.
Overflow Management: Setting overflow: auto on the body and html elements helps manage content overflow and minimize the impact of scrollbars on the layout.

By understanding and addressing these limitations, you can create more robust and responsive web designs that handle various viewport conditions and user interactions effectively.

Flexbox and Grid Layouts

When using Flexbox or Grid layouts, percentages can be challenging due to their intrinsic sizing rules. Flexbox and Grid use their own rules to determine the size of elements, and percentages might not behave as expected.

Example with Flexbox:

.container {

    display: flex;

    height: 100vh;

}

.child {

    flex: 1;

}

In this example, the .container uses Flexbox to distribute space among its children. The .child elements will flex to fill the available height of the container, but using percentages within these children can lead to unexpected results due to the way Flexbox calculates sizes.

Challenges of Using Percentages with Flexbox and Grid

Intrinsic Sizing Rules: Flexbox and Grid layouts have their own intrinsic sizing rules, which can override the expected behavior of percentage values.

Undefined Heights in Grid Layouts: In Grid layouts, child elements might not have a defined height, making it difficult to use percentages effectively.

Container Queries: Container queries can struggle with grid items as they might not have an intrinsic size, leading to challenges in querying their block size.

Recommendations for Using Flexbox and Grid Layouts

Flexbox:

Use flex properties to distribute space rather than relying on percentages. For example, flex: 1 allows a child to take up available space proportionally.
Combine Flexbox with viewport units or fixed sizes when percentages don't yield the expected results.

Example with Flexbox:

Grid:

Use fr units to define fractional space within the grid. This is more intuitive and flexible than percentages.
Define explicit row and column sizes when needed, and use minmax() for more control over item sizing.

Example with Grid:

In this example, the .grid-container uses the fr unit to distribute space between columns, ensuring a flexible and predictable layout. The grid-template-rows: auto allows rows to size based on their content, making it easier to manage item heights.

Flexbox and Grid layouts offer powerful tools for responsive design, but they require a different approach than traditional percentage-based layouts. By leveraging Flexbox's flex properties and Grid's fr units, you can create more reliable and adaptable layouts. Combining these techniques with viewport units and fixed sizes can further enhance your control over the design.

Background Size and Gradients

When using percentages for background size, the percentages are relative to the background positioning area of the element. This principle is similar to how gradients work with percentages:

Background Size:

The background-size property can use percentage values to set the size of the background image relative to the background positioning area of the element.
For example, background-size: 50% means the background image will cover 50% of the background positioning area.

Example:

Gradients:

When using percentages in linear or radial gradients, they refer to the position within the background area.
This can be useful for creating responsive gradient backgrounds that adjust to the size of the element.

Example with Gradients:

Potential Issues and How to Handle Them:

Using percentages for background size and gradients can lead to unexpected squishing or stretching if the element’s size changes.
To avoid these issues, consider using other units like pixels or viewport units, or combine percentages with other CSS techniques to ensure the background and gradients scale properly.

By understanding how percentages work with background sizes and gradients, you can create visually appealing designs that adapt to different screen sizes and maintain their intended appearance.

Percentages in SVGs

SVGs (Scalable Vector Graphics) are inherently responsive, making them a powerful tool for creating scalable and flexible web graphics. Using percentages in SVGs can help ensure they adapt seamlessly to different viewport sizes.

How Percentages Apply to SVGs:

When you set the width or height of an SVG to a percentage, it scales relative to its containing element.
The viewBox attribute defines the coordinate system and aspect ratio of the SVG, allowing for flexible scaling.
Percentages can be used within the SVG elements to position and size shapes relative to the SVG container.

Best Practices for Responsive SVGs:

Define a ViewBox:
- Always define the viewBox attribute to enable scaling. This attribute sets up an internal coordinate system for the SVG.

Example:

Use Percentages for Positioning and Sizing:
- Use percentage values for attributes like x, y, width, and height to create flexible layouts within the SVG.

Example:

Unitless Path Data:
- Use unitless values for path data to ensure paths scale properly with the SVG.

Example:

Example of a Responsive SVG:

By following these best practices and understanding how percentages apply to SVGs, you can create graphics that are both responsive and visually consistent across different devices and screen sizes.

Cyclical Percentage Issues

Sometimes, the height of a container depends on its children, which may use percentages that reference the parent. This can create cyclical dependencies, causing layout issues. For example, if a parent wants to contain its child, and the child is set to be 50% of the parent, it can create an endless loop.

Good News: The CSS spec provides instructions on how to resolve these intrinsic percentage issues. Understanding and applying these rules can help you avoid common pitfalls.

Solutions and Best Practices Based on CSS Specifications:

Avoid Circular Dependencies::
- Ensure that parent and child elements do not have interdependent percentage-based sizes.
Example:

Avoid setting both parent and child heights in percentages if they reference each other.

2. Use Min-Height and Max-Height:

Use min-height and max-height to provide a fallback size for elements, preventing endless loops.

3. Specify One Dimension Explicitly:

Define either the parent or child element’s height explicitly to break the cyclical dependency.

By implementing these best practices, you can avoid common cyclical percentage issues in CSS and create beautiful, stable layouts.

Utilize Flexbox or Grid Layouts to Resolve Cyclical Percentage Issues
Utilize Flexbox or Grid Layouts:
- Use Flexbox or Grid for layout purposes to manage the size and alignment of child elements without direct dependency on percentage-based heights.

Example with Flexbox:

https://codepen.io/topeogunleye21/pen/JjQYVqN

Example with Grid:

Using Flexbox and Grid layouts, you can easily manage the size and alignment of child elements, avoiding the complexities of percentage-based heights. These modern CSS techniques provide more flexibility and control, ensuring your layouts are both beautiful and functional.

By following these best practices and understanding the underlying principles of cyclical percentage dependencies, you can create more robust and predictable layouts, avoiding common pitfalls that can lead to rendering issues.

Conclusion

Understanding CSS percentage values and their nuances is crucial for creating flexible and responsive web designs. Percentages can behave differently depending on the property and the context in which they are used, leading to unexpected layout behaviors if not properly understood.

By leveraging a mix of units and properties—percentages, viewport units, fixed units, and flexible layouts like Flexbox and Grid—you can build robust and responsive web designs that adapt well to different screen sizes and content requirements. Experiment with these techniques, understand their behaviors and apply them strategically to create seamless and adaptive user experiences.

References and Further Reading

Here are some additional resources for in-depth understanding and advanced techniques:

Understanding CSS Percentage by Khang.
Percentage documentation from MDN.
The problem with viewports units by Kevin Powell

Part Two: Creating Our Recipe Reusable Skeleton Component

topeogunleye — Wed, 19 Jun 2024 21:11:23 +0000

Creating a Reusable Skeleton Component

Welcome to part two of Skeleton Loaders: Simplifying Data Loading in React! In the first article, we learned how Facebook and LinkedIn leverage skeleton loading screens in managing users' expectations while data is fetched, built our React app from scratch, and added styles to our React application. In part two, we'll guide you through the practical steps of implementing skeleton loading screens in your React applications including animations.

Creating a Reusable Skeleton Component

We aim to create a reusable base skeleton element component that can be configured into different shapes. To achieve this, let's start by creating a new folder named skeletons within our src directory. Inside this folder, we'll create a file named skeletonElement.jsx. This file will house our base skeleton component, which is designed to be reusable and customizable.

Here's the code to include in the skeletonElement.jsx file:

import './Skeleton.css';

const SkeletonElement = ({ type }) => {
  const classes = `skeleton ${type}`;

  return (
    <div className={classes}></div>
  )
}

export default SkeletonElement

In this code, we define a SkeletonElement component that accepts a type prop. This type prop allows us to customize the shape of the skeleton element by applying different CSS classes. The component then returns a div with the CSS classes applied.

Let’s create the style for our skeleton component by creating a file named Skeleton.css and adding the below styles:

/* basic styles */
.skeleton {
  background: #ddd;
  margin: 10px 0;
  border-radius: 4px;
}


.skeleton.title {
  width: 50%;
  height: 24px;
  margin-bottom: 15px;
}


.imageBig {
  width: 240px;
  height: 240px;
}


.imageMealInfo {
  width: 92vw;
  height: 48vh;
  padding-top: 0;
  margin-top: 0;
}


.mealInfo {
  width: 176px;
  height: 24px;
}


.textBig {
  width: 240px;
  height: 1152px;
}


.liText {
  width: 100px;
  height: 16px;
  margin: 4px 15px;
}


.imageSmall {
  width: 240px;
  height: 240px;
}


@media screen and (min-width: 1080px) {
  .imageMealInfo {
    max-width: 320px;
    max-height: 320px;
  }
}
@media screen and (min-width: 767px) {
  .imageSmall {
    width: 208px;
    height: 224px;
  }


  .title {
    width: 50%;
    height: 24px;
  }


  .imageBig {
    min-width: 100vw;
    min-height: 320px;
  }


  .imageMealInfo {
    max-width: 200px;
    max-height: 200px;
    margin-bottom: 8rem;
  }


  .mealInfo {
    width: 512px;
    height: 24px;
  }


  .textBig {
    width: 576px;
    height: 456px;
  }


  .liText {
    width: 100px;
    height: 16px;
  }
}


@media screen and (min-width: 475px) {
  .imageSmall {
    width: 208px;
    height: 212px;
  }


  .imageMealInfo {
    width: 92vw;
    height: 62vh;
  }

}


@media screen and (min-width: 425px) {
  .imageBig {
    width: 312px;
    height: 312px;
  }


  .textBig {
    width: 318.75px;
    height: 840px;
  }
}


@media screen and (min-width: 375px) {
  .imageBig {
    width: 281.25px;
    height: 281.25px;
  }


  .textBig {
    width: 281.25px;
    height: 960px;
  }



}
/* skeleton profile */
.skeleton-wrapper {
  /* margin: 20px auto; */
  padding: 10px 15px;
  border-radius: 4px;
  position: relative;
}


.wrapper {
  border-radius: 4px;
  position: relative;
}


/* Category */
.catImg {
  width: 177px;
  height: 110px;
}


.catName {
  width: 75px;
  height: 28px;
}


/* themes */
.light {
  background: #f2f2f2;
}


.dark {
  background: #444;
}


.dark .skeleton {
  background: #777;
}


/* animation effects */
.shimmer-wrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  animation: loading 2.5s infinite;
}


.shimmer {
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: skewX(-20deg);
  box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.05);
}


.dark .shimmer {
  background: rgba(255, 255, 255, 0.05);
}


@keyframes loading {
  0% {
    transform: translateX(-150%);
  }
  50% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(150%);
  }
}


/* skeleton profile */
.skeleton-profile {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 30px;
  align-items: center;
}


/* themes */
.skeleton-wrapper.light {
  background: #f2f2f2;
}
.skeleton-wrapper.dark {
  background: #444;
}
.skeleton-wrapper.dark .skeleton {
  background: #777;
}

Explanation of Styles for Skeleton Loading

Skeleton Element Styles: The SkeletonElement.js file defines a reusable skeleton component that can be configured with different shapes. These shapes are defined in the accompanying Skeleton.css file. By applying different CSS classes, we can customize the appearance of skeleton elements, such as their size, color, and animation effects.
Wrapper Styles: The SkeletonHome.js file wraps the skeleton elements in a div with the class wrapper. This wrapper provides a container for the skeleton elements and allows for additional styling or layout adjustments if needed.
Shimmer Effect: The Shimmer component adds a subtle shimmer effect to the skeleton elements. This effect is achieved through CSS animations and helps indicate to the user that content is loading.

Creating Our Shimmer:

Let’s create a Shimmer.js file and add this code below to it:

const Shimmer = () => {
  return (
    <div className="shimmer-wrapper">
      <div className="shimmer"></div>
    </div>
  );
};


export default Shimmer;

Creating our Skeleton Home page

Let’s create a SkeletonHome.js file and add this code below to it:

import Shimmer from "./Shimmer";
import SkeletonElement from "./SkeletonElement";


const SkeletonHome = ({ theme }) => {
  const themeClass = theme || "light";


  return (
    <div className={`wrapper ${themeClass}`}>
      <div className="meals grid grid-cols-1  gap-5 mt-5 xs:grid-cols-2 sm:grid-cols-3 xl:grid-cols-4">
        <SkeletonElement type="imageSmall" />
        <SkeletonElement type="imageSmall" />
        <SkeletonElement type="imageSmall" />
        <SkeletonElement type="imageSmall" />
        <SkeletonElement type="imageSmall" />
        <SkeletonElement type="imageSmall" />
        <SkeletonElement type="imageSmall" />
        <SkeletonElement type="imageSmall" />
        <SkeletonElement type="imageSmall" />
        <SkeletonElement type="imageSmall" />
        <SkeletonElement type="imageSmall" />
        <SkeletonElement type="imageSmall" />
      </div>
      <Shimmer />
    </div>
  );
};

export default SkeletonHome;

Now let’s make use of our SkeletonHome.js component in our Home.js component so that we have a skeleton loader on our home component. Copy the code below and paste it into our Home.js component:

import { useEffect, useState } from "react";
import SkeletonHome from "../skeletons/SkeletonHome";


const Home = () => {
  const [meals, setMeals] = useState(null);


  useEffect(() => {
    setTimeout(async () => {
      const res = await fetch(
        "https://www.themealdb.com/api/json/v1/1/search.php?s=chicken"
      );
      const meals = await res.json();
      setMeals(meals);
      console.log(meals.meals[0]);
    }, 5000);
  }, []);


  return (
    <>
      <div className="container">
        <div className="m-auto max-w-3xl flex flex-col items-center justify-center text-center">
          <div id="meals" className="meals">
            {meals &&
              meals.meals.map((meal) => (
                <div className="meal" key={meal.idMeal}>
                  <img
                    className="meal-img"
                    src={meal.strMealThumb}
                    alt={meal.strMeal}
                  />
                  <div className="meal-info" data-mealid={meal.idMeal}>
                    <h3>{meal.strMeal}</h3>
                  </div>
                </div>
              ))}
              {!meals && [1,2,3,4,5].map((n) => <SkeletonHome key={n} theme="dark" />)}
          </div>
          {}
        </div>
      </div>
    </>
  );
};


export default Home;

Explanation of Theme Customization in SkeletonHome.js Component:

The SkeletonHome.js component offers theme customization through the theme prop. This prop allows users to specify the color scheme for the skeleton elements, providing flexibility in integrating the skeleton loading experience with different application designs.

Theme Prop Handling: Within the SkeletonHome.js component, the theme prop is utilized to determine the color scheme. By default, if no theme is provided, the component falls back to the "light" theme. This ensures that the component remains functional even if the theme prop is not explicitly set.

const SkeletonHome = ({ theme }) => {
  const themeClass = theme || "light"; // Default to "light" theme if no theme is provided
  // Rest of the component code...
};

Applying Theme Classes: The determined theme, either "light" or the provided value, is used to dynamically generate CSS classes. These classes are then applied to the wrapper div of the skeleton elements, enabling the styling of the skeleton components based on the selected theme.

<div className={`wrapper ${themeClass}`}>
  {/* Skeleton elements go here */}
</div>

Theme Flexibility: By allowing users to specify the theme, developers can seamlessly integrate the skeleton loading experience with their application's design language. For example, setting the theme to "dark" can complement dark mode interfaces, ensuring consistency in visual presentation across different application states.

<SkeletonHome key={n} theme="dark" />

In summary, the SkeletonHome.js component facilitates theme customization through the theme prop, providing users with the ability to tailor the skeleton loading experience to match their application's design requirements. This flexibility enhances the overall user experience by ensuring a cohesive and visually appealing transition between content loading and display.

Conclusion:

In wrapping up, adding skeleton loading screens to your React app can make it feel faster and more user-friendly. With components like SkeletonHome, you can easily create these loading screens for different parts of your app. By using CSS and React, you can customize how these loading screens look and behave to match your app's style. Ultimately, using skeleton loading screens improves how users perceive your app's speed and makes it more enjoyable to use.

Skeleton Loaders: Simplifying Data Loading in React: Part 1

topeogunleye — Wed, 19 Jun 2024 20:58:40 +0000

Part One: Creating Our React App

Welcome to our two-part series on Skeleton Loaders: Simplifying Data Loading in React! In part one of this series, we'll create our modern react application from scratch, fetch the data, and add styling.

Understanding the Power of Skeleton Loading Screens

Many modern websites handle data fetching in the browser instead of on the server. This is good because it means that a user doesn’t have to wait long before getting their content loaded from the server but then has to wait for their data to be loaded from the browser once it arrives.

Developers often use loaders or spinners to manage user expectations during this data-fetching process. A particularly effective and popular approach, adopted by major websites like Facebook and LinkedIn, is the use of skeleton loading screens. These screens display placeholder elements that mimic the layout of the actual content, providing a visual representation of the incoming data.

Prerequisites

Basic knowledge of React.
Familiarity with React Hooks.

Setting Up the Project

First, we'll create a new React application using the following command:

npx create-react-app react-skeleton-screens

Next, navigate into the newly created project directory:

cd react-skeleton-screens

Open the project in Visual Studio Code:

code .

Removing Boilerplate Code

Let's clean up the default files created by create-react-app:

Open the src folder and delete the following files:
- App.css
- App.test.js
- logo.svg
- setupTests.js
In index.js, remove the import and invocation of the service worker.
In App.js, remove the import of logo.svg and App.css.

Replace the code in App.js with the following:

import React from 'react';
import User from './components/User';
import Articles from './components/Articles';

function App() {
  return (
    <div className="App">
      <header>
        <h1>React Skeletons</h1>
      </header>

      <div className="content">

      </div>
    </div>
  );
}

export default App;

Creating Components

Now, let's create the necessary components. In the src directory, create a new folder called components. Inside this folder, create one file: Home.jsx.

import React from 'react';

const Home = () => {
  return (
    <div className="home">

    </div>
  );
}

export default Home;

With these steps, you've set up a basic React application structure and created components for our landing page, which will serve as the foundation for implementing skeleton screens. This setup ensures a clean slate, allowing you to focus on building the skeleton loading screens that enhance user experience during data fetching.

Now we’re going to nest the Home component inside the content div in our App.js component. Copy the code below into your app.js to do this:

import Home from './Home';


function App() {
  return (
    <div className="App">
      <header>
        <h1>Meal Recipes</h1>
      </header>

      <div className="content">
        <Home />
      </div>
    </div>
  );
}

export default App;

Adding Styles to the Application

To enhance the appearance of our application, we'll apply some styles to the header in App.js. Follow the steps below to update the styles in your index.css file.

Update `index.css`

Open index.css and replace its contents with the following styles:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


header {
  font-size: 1.5rem;
  font-weight: 900;
  display: grid;
  align-items: center;
}


header h1 {
  max-width: 1200px;
  margin: 0 auto;
}


.container {
  background-color: #6b7280;
  color: #ffffff;
  min-height: 100vh;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}


.meals {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem; /* Equivalent to gap-5 in Tailwind */
  margin-top: 1.25rem; /* Equivalent to mt-5 in Tailwind */
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  padding: 10px 50px;
}


@media (min-width: 640px) {
  .meals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (min-width: 768px) {
  .meals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


@media (min-width: 1280px) {
  .meals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* .meal class */
.meal {
  /* Equivalent to rounded overflow-hidden shadow-md cursor-pointer relative h-60 w-60 xs:h-56 xs:w-52 sm:h-56 sm:w-52 lg:h-56 lg:w-52 text-left; */
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  position: relative;
  height: 15rem; /* Equivalent to h-60 */
  width: 15rem; /* Equivalent to w-60 */
}


.meal-img:hover {
  box-shadow: 0 10px 15px -3px rgba(147, 102, 102, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}


/* .meal-img class */
.meal-img {
  /* Equivalent to w-full h-full border-solid border-4 border-white; */
  width: 100%;
  height: 100%;
  border-style: solid;
  border-width: 4px;
  border-color: #ffffff; /* Assuming white border */
}

Explanation of Styles

The universal selector (*) is used to apply the following styles to all elements on the page:
- margin: 0; and padding: 0; set the margin and padding of all elements to zero, effectively removing any default spacing.
- box-sizing: border-box; ensures that the total width and height of an element include both its content and padding, but not the margin.
The header element:
- font-size: 1.5rem; sets the font size to 1.5 times the default font size.
- font-weight: 900; makes the text bold.
- display: grid; uses CSS Grid for layout.
- align-items: center; vertically centers the content within the header.
The .container class:
- background-color: #6b7280; sets the background color to a shade of gray (#6b7280).
- color: #ffffff; sets the text color to white.
- min-height: 100vh; ensures that the container takes up at least the full viewport height.
- The transition properties control the animation duration and timing function when transitioning styles.
The .meals class:
- Uses CSS Grid to create a responsive grid layout with varying column numbers based on screen width.
- gap: 1.25rem; adds spacing between grid items.
- margin-top: 1.25rem; provides top margin.
- The transition properties control the animation when transitioning styles.
- padding: 10px 50px; adds padding to the container.
Media queries:
- Adjust the number of columns in the .meals grid based on screen width.
The .meal class:
- Creates a card-like styling for meal items.
- Sets border radius, overflow behavior, box shadow, cursor, and dimensions.
The .meal-img class:
- Sets the image dimensions and adds a white border.

These styles will ensure that your application's header looks clean and visually appealing. The header will have a consistent blue background with white text, providing a professional look.

Final Steps

After adding the styles, your header in the application should now have a distinct appearance, with a blue background and centered white text.

Running the Application

To see your changes in action, make sure to start your development server if it's not already running:

yarn dev

Navigate to http://localhost:3000 in your browser to view the updated header with the new styles applied.

With these styling updates, your React application now has a polished header, setting a solid foundation for building out the rest of the skeleton loading screens and other features.

Fetching Data

We're going to use the MealDB API for our data fetching: https://www.themealdb.com/api.php.

In our App.js, let's create a state to store our data when we fetch it.

const [meals, setMeals] = useState(null);

Initially, our meals state will be null because we don't have any meal data yet. However, when this component is rendered to the DOM, we need to fetch the data. To do this, we'll use the useEffect hook, which runs automatically after the component has been rendered.

Let's create a useEffect and use a setTimeout so that we can see the effect of the skeleton loader for a bit longer. Note that we wouldn't typically use a delay like this in a production application. Copy and paste the code below into the App.js file:

import React, { useState, useEffect } from 'react';
import Home from './components/Home';

function App() {

  const [meals, setMeals] = useState(null);

  // runs automatically after initial render
  useEffect(() => {
    setTimeout( async () => {
      const res = await fetch('https://www.themealdb.com/api/json/v1/1/search.php?s=chicken');
      const data = await res.json();
      setMeals(data);
    }, 5000)
  }, [])


  return (
    <div className="App">
      <header>
        <h1>Meal Recipes</h1>
      </header>

      <div className="content">
        <Home />
      </div>
    </div>
  );
}

export default App;

Now we need to check if we have our meal results. Let's use conditional rendering in React to display our meal recipe results. Copy and paste the code below into the Home.js file:

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom'


const Home = ( ) => {
    const [meals, setMeals] = useState(null);


  useEffect(() => {
    setTimeout(async () => {
      const res = await fetch(
        "https://www.themealdb.com/api/json/v1/1/search.php?s=chicken"
      );
      const meals = await res.json();
      setMeals(meals);
      console.log(meals.meals[0])
    }, 5000);
  }, []);


  return (
    <>
      <div className="bg-gray-900 text-white min-h-screen">
        <div className="m-auto max-w-3xl flex flex-col items-center justify-center text-center">


          <div id="meals" className="meals">
            {meals &&
              meals.meals.map((meal) => (
                <div className="meal" key={meal.idMeal}>
                  <Link to={`/MealInfo/${meal.idMeal}`}>
                    <img
                      className="meal-img"
                      src={meal.strMealThumb}
                      alt={meal.strMeal}
                    />
                    <div className="meal-info" data-mealid={meal.idMeal}>
                      <h3>{meal.strMeal}</h3>
                    </div>
                  </Link>
                </div>
              ))}
          </div>
          ){"}"}
        </div>
      </div>
    </>
  );
};


export default Home;

Adding React Router

Since you're using Link from react-router-dom, we need to install react-router-dom in your project. Follow these steps:

Open your terminal or command prompt.
Navigate to your project directory.
Run the following command to install react-router-dom using npm:

npm install react-router-dom

Alternatively, if you're using Yarn, you can use this command:

yarn add react-router-dom

Once the installation is complete, you can import the necessary components from react-router-dom and start defining your routes in your Home.js file.

Wrapping the App with BrowserRouter

Let’s wrap our App in main.js with BrowserRouter from react-router-dom. This is because we're using Link from react-router-dom in our Home component, which is calling useContext. The context it is looking for is provided by BrowserRouter, but our app is not wrapped by a BrowserRouter. Your main.js should be like this:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'


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

Conclusion

In conclusion, in Part One of our series, we've laid the groundwork for implementing skeleton loading screens in React applications. By setting up a basic React project, creating components, adding styles, and fetching data from an API, we've prepared the foundation for integrating skeleton loading screens into our application.

In Part Two, we'll dive deeper into the implementation details of skeleton loading screens. We'll explore how to create reusable skeleton components, customize loading animations, and handle various loading scenarios efficiently. Click here for Part Two, where we'll take our skeleton loading screens to the next level!

Supercharge Your React Development with Vite, ESLint, and Prettier in VSCode

topeogunleye — Fri, 12 Apr 2024 02:57:34 +0000

You can find the finished project at https://github.com/topeogunleye/modern-react-app-vite-eslint-prettier.

Boost your React projects by combining Vite’s fast development server, ESLint’s strong linting features, and Prettier’s consistent formatting. With these tools, your VSCode becomes a productivity powerhouse. As you read this article, you’ll learn how to set up Prettier and ESLint to automatically format your files when you save them, maintaining a polished codebase.

Prerequisites

Ensure Node.js and Yarn are installed on your computer. If they’re not already set up, visit the Node.js official website to download and install Node.js, and visit the Yarn official website to download and install Yarn.

Package Versions

Yarn: 1.22.22
Node: 20.12.2
See full package.json on this gist

Step 1: Initializing the Project with Vite

To kick off our project, follow these steps:

Create a new project directory and initialize it:

mkdir my-react-app
cd my-react-app
yarn init -y

Install Vite with the React template:

yarn create vite my-react-app --template react
cd my-react-app

Step 2: Installing ESLint

ESLint is a powerful tool that statically analyzes your code to identify and fix problems quickly. It integrates seamlessly with most text editors and can be incorporated into your continuous integration pipeline for automated code quality checks.

To install ESLint, run the following command:

yarn create @eslint/config

This command initializes ESLint in your project, guiding you through the configuration process to suit your coding style and requirements. You will see a series of prompts similar to this:

? How would you like to use ESLint? …
  To check syntax only
▸ To check syntax and find problems

? What type of modules does your project use? …
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? …
▸ React
  Vue.js
  None of these

? Does your project use TypeScript? …
▸ No
  Yes

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

? Would you like to install them now? ‣ No / Yes
✔ Would you like to install them now? · Yes

? Which package manager do you want to use? …
▸ npm
  yarn
  pnpm
  bun

Select the appropriate options based on your needs:

Choose "To check syntax and find problems" for comprehensive code quality checks.
Select "JavaScript modules (import/export)" if you are using ES6 modules (ESM).
Choose "React" as your framework.
Specify whether your project uses TypeScript.
Indicate where your code runs by selecting "Browser" and/or "Node" as applicable.
Choose "Yes" to install the required dependencies.
Select your preferred package manager (e.g., yarn).

This thorough step-by-step setup will configure ESLint to effectively lint your project's code according to your specific requirements.

Step 3: Installing the ESLint Plugin for VSCode

Enhance your coding experience by integrating ESLint into VSCode. Follow these steps:

Open VSCode Extensions:
- Access the Extensions view by clicking the VSCode sidebar’s square icon or pressing Ctrl+Shift+X.
Search for ESLint:
- Type ESLint into the search bar.
Install the Plugin:
- Find the ESLint plugin by Microsoft and click ‘Install’. This will help you maintain code quality and adhere to best practices directly within your editor.

By adding the ESLint plugin to VSCode, you can automatically lint and format your code as you write, ensuring consistency and readability.

Step 4: Setting Up Prettier

Install Prettier:
```
yarn add --dev prettier
```
Create and Configure .prettierrc.json:
```
touch .prettierrc.json
```
Define your formatting preferences within .prettierrc.json. For example, to use single quotes:
```
{
  "singleQuote": true
}
```

Step 5: Sync Prettier & ESLint

To make Prettier and ESLint work together without issues:

Install eslint-config-prettier:
```
yarn add --dev eslint-config-prettier
```
Update .eslintrc.cjs:
Add eslint-config-prettier to the extends array in your .eslintrc.cjs file to ensure that Prettier’s formatting doesn’t conflict with ESLint rules:
```
module.exports = {
  extends: [
    // other configs...
    'prettier'
  ],
  // other settings...
};
```
Check for Conflicts:
```
npx eslint-config-prettier ./src/main.jsx
```
If you see the message "No rules that are unnecessary or conflict with Prettier were found," it means that Prettier and ESLint are properly integrated.

Step 6: Integrating Prettier for Code Formatting

To ensure consistent code style across your project, integrate Prettier by adding a format script to your package.json:

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview",
  "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\""
}

Usage:
Execute the command yarn format to automatically format all files in the src directory, including subdirectories. Prettier will apply formatting rules to TypeScript, JavaScript, JSON, and CSS files, ensuring a uniform coding style throughout your project.

Step 7: Installing the Prettier Plugin for VSCode

To streamline your development workflow, install the Prettier extension for Visual Studio Code. This will allow you to automatically format your code as you write, ensuring consistent style without manual effort.

Open VSCode Extensions:
- Launch Visual Studio Code and navigate to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window, or by pressing Ctrl+Shift+X.
Search for Prettier:
- In the Extensions view, type Prettier-Code Formatter in the search bar. Look for the official extension published by Prettier.
Install Extension:
- Click on the Install button to add the Prettier extension to your Visual Studio Code.

Executing Code Formatting with Prettier

To format your code using Prettier within Visual Studio Code, utilize the Command Palette for quickly accessing all available commands.

Open Command Palette:
- Press Ctrl+Shift+P to open the Command Palette. This shortcut brings up a search bar where you can run various commands.
Run Format Document:
- Type Format Document into the Command Palette’s search bar. Select the command when it appears in the dropdown menu. This action will apply Prettier formatting to your currently open file.
Verify Formatting:
- After executing the command, check your code to ensure that Prettier has formatted it according to your project’s style guide.

Optional Settings: Customizing Prettier Behavior in VSCode

To fine-tune how Prettier formats your code in Visual Studio Code, follow these steps:

Set Prettier as Default Formatter:
- Go to File > Preferences > Settings (or Code > Preferences > Settings on macOS), search for Default Formatter, and select Prettier-Code Formatter from the dropdown menu.
Enable Format On Save:
- Still in Settings, find Format On Save and check the box to have Prettier format your files each time you save.
Activate Format On Paste:
- Look for Format On Paste in the Settings and enable it to format content automatically when you paste it into your document.

Conclusion

Adopting Vite, ESLint, and Prettier in VSCode enhances our development with efficiency and quality. These tools help us maintain and scale projects, keeping us at the forefront of technology. As developers, we must continually evolve with the ever-changing tech landscape, and leveraging tools like Vite, ESLint, and Prettier helps us stay ahead of the curve. Thanks for exploring these tools with me. Happy coding!

You can find the full app setup in this GitHub repository.