DEV Community: Favour Onyeke

The Developer Content Framework: Why Most DevTools Fail at Content Marketing.

Favour Onyeke — Fri, 27 Feb 2026 10:54:48 +0000

In 1996, Bill Gates wrote an essay titled "Content is King."
Almost 30 years later, most DevTools companies are still acting like content is an afterthought.
Most DevTools companies don't struggle because their product is bad.
They struggle because nobody understands it. Nobody trusts it. Nobody talks about it. Content is so versatile; with it, you get to build trust with developers, get new leads, increase conversions, and so much more
The Brutal Truth: DevTools Content Is Usually Self-Centered
Here's what most DevTools content sounds like:
"We built a scalable, distributed, event-driven architecture…"
Developers don't wake up excited about your architecture.
They wake up thinking:

Why is my build failing?
Why is this auth flow breaking? *Why am I stuck at 2 am debugging something that should just work? What tool fits this project I'm working on?

If your content doesn't enter that emotional space - frustration, pressure, deadlines, curiosity - it's invisible.

Why Most DevTools Fail at Content Marketing

A tech company once reached out to me about having low conversions their blog, and weak search performance. They were convinced it was an SEO issue. i took some time to review the website, their marketing newsletters, and articles. After reviewing their articles and newsletters, the problem was clear, the content revolved entirely around the company.
Every post highlighted their architecture, their scalability, their product updates. It was technically accurate, but emotionally disconnected.
Once we shifted the focus from "what we built" to "what developers struggle with," everything changed.
We thought as a user. Why will the user click and read a long article or newsletter that the company publishes? This is the guide we used:
Speed: How quickly can I integrate this? Will it reduce my build time, deployment time, or debugging time? Speed isn't vanity - it protects momentum.
Clarity: Are the docs straightforward? Are the trade-offs explained? If something breaks, will I understand why without guessing?
Control: Can I configure it to fit my stack? Is it flexible, or am I locked into rigid workflows? Developers don't like black boxes.
Stability: Can I trust this in production? Is it reliable under load? No one wants to gamble their uptime on marketing promises.
Respect for their time: Get to the point. Show the code. Skip the fluff. If your content wastes time, they assume your tool will too.

How to Create an Audio Visualizer using Nextjs

Favour Onyeke — Sun, 14 Apr 2024 14:59:38 +0000

An audio visualizer is a graphical representation of audio frequencies and amplitudes on a display. It adds a visually appealing element to audio playback, animating and synchronizing visual elements with the audio being played. This can enhance the user experience by providing a visually immersive and interactive interface. In this article, we will develop a simple Next.js application that illustrates how to use the Web Audio API to capture audio data from a source and display visual representations on the screen.

Why is an Audio Visualizer necessary

An audio visualizer is an essential feature that can make a website more exciting and interactive. Imagine listening to music or audio and seeing the sound come to life with colorful visuals and animations. It takes your browsing experience to a whole new level!

Also, Adding an audio visualizer to a site helps you better understand and connect with the audio content. Think about it — when you can see the visual representation of the sound, it becomes much easier to grasp its meaning.

How does an Audio visualizer work

So, you’re probably aware that when you’re jamming to your favorite tunes online, your browser is doing some heavy lifting behind the scenes to make it all happen. That’s where the Web Audio API comes into play. This powerful tool allows developers to create and manipulate audio graphs, which represent the flow of audio data through various nodes. Each node has a specific task, such as reading audio input from a file or microphone, applying effects like reverb or distortion, or sending the audio to your speakers or headphones.

But the Web Audio API doesn't stop at audio processing. It also gives developers precise control over timing and synchronization, allowing them to fine-tune the timing and playback of audio for a seamless and immersive experience.

Terms Associated with the Web Audio API

The Web Audio API offers a flexible system for managing audio on the web. It has a variety of methods that enable developers to perform various audio effects.

In this article, we'll explore three essential terms in the Web Audio API for our project. For more in-depth information, visit MDN Docs.

AudioContext: It's where you manage all the audio stuff, like creating sounds, adding effects, and controlling how they're played. Think of it as a dashboard where you connect different audio parts to make your sounds come to life on the web.

AnalyserNode: An AnalyserNode is a type of audio node that performs real-time analysis of audio data. It allows developers to extract frequency and time-domain data from audio signals.

SourceNode: It is a type of audio nodein the Web Audio API that represents an audio source, such as an audio file, microphone input, or synthesized sound.

SourceNodes are created using methods provided by the AudioContext as the createMediaElementSource()

Getting started

Let’s start by creating a new Next.js project by running the following command in your terminal.



npx create-next-app Audio-App

Don't forget to include Tailwind CSS as well, which will help you style your project with ease.

At the page.js, rename the Home component to AudioApp. Your page.js app should look like this:



"use client";
import React, { useState, useRef } from "react";

function AudioApp() {
  return <main></main>;
}

export default AudioApp;

Now, you have created a new Next.js project named Audio-App, installed Tailwind CSS, and renamed the default page with the Home component to AudioApp.

Styling of the app

To display an audio visualizer, an audio file is required. One way to do this is to add a form to your AudioApp.js component that allows users to upload their own music.

I found a helpful template from Flowbite that we can use: Flowbite File Input.



"use client";
import React from "react";

function AudioApp() {
  return (
    <main>
      <div className="h-screen font-sans text-gray-900 bg-gray-300 border-box">
        <div className="flex justify-center w-full mx-auto sm:max-w-lg">
          <div className="flex flex-col items-center justify-center w-full h-auto my-20 bg-white sm:w-3/4 sm:rounded-lg sm:shadow-xl">
            <div className="mt-10 mb-10 text-center">
              <h2 className="text-2xl font-semibold mb-2">Upload your music</h2>
              <p className="text-xs text-gray-500">File should be of mp3 format</p>
            </div>
            <form
              action="#"
              className="relative w-4/5 h-32 max-w-xs mb-10 bg-white bg-gray-100 rounded-lg shadow-inner"
            >
              <input type="file" id="file-upload" className="hidden" />
              <label
                htmlFor="file-upload"
                className="z-20 flex flex-col-reverse items-center justify-center w-full h-full cursor-pointer"
              >
                <p className="z-10 text-xs font-light text-center text-gray-500">
                  Upload your music here
                </p>
                <svg
                  className="z-10 w-8 h-8 text-indigo-400"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
                </svg>
              </label>
            </form>
          </div>
        </div>
      </div>
    </main>
  );
}

export default AudioApp;

This will create a styled form for media upload. To display the audio player and audio visualizer, we will add this styled music card from Tailwindcomponents below the form.



"use client";
import React, { useState, useRef } from "react";

function AudioApp() {

  return (
    <main>
      <div className="h-screen font-sans text-gray-900 bg-gray-300 border-box">
        <div className="flex justify-center w-full mx-auto sm:max-w-lg">
          <div className="flex flex-col items-center justify-center w-full h-auto my-20 bg-white sm:w-3/4 sm:rounded-lg sm:shadow-xl">
            <div className="mt-10 mb-10 text-center">
              <h2 className="text-2xl font-semibold mb-2">Upload your music</h2>
              <p className="text-xs text-gray-500">File should be of mp3 format</p>
            </div>
            <form
              action="#"
              className="relative w-4/5 h-32 max-w-xs mb-10 bg-white bg-gray-100 rounded-lg shadow-inner"
            >
              <input type="file" id="file-upload" className="hidden" />
              <label
                htmlFor="file-upload"
                className="z-20 flex flex-col-reverse items-center justify-center w-full h-full cursor-pointer"
              >
                <p className="z-10 text-xs font-light text-center text-gray-500">
                  Upload your music here
                </p>
                <svg
                  className="z-10 w-8 h-8 text-indigo-400"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
                </svg>
              </label>
            </form>
          </div>
        </div>
      </div>

      <main className="flex min-h-screen w-full items-center justify-center">
        <article className="group relative flex h-[12rem] w-[50rem] overflow-hidden rounded-2xl bg-[#3a4448]">
          {/* <!-- image (left side) --> */}
          <div className="absolute inset-y-0 left-0 w-48">
            <img
              src="https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fG11c2ljfGVufDB8fDB8fHww"
              alt=""
              className="h-full w-full object-cover object-center opacity-95"
            />

            <div className="invisible absolute inset-0 flex h-full w-full items-center justify-center bg-[#0c0c0c]/70 opacity-0 transition-all group-hover:visible group-hover:opacity-100"></div>
          </div>

          <div className="absolute inset-y-0 left-44 w-[39rem] overflow-hidden rounded-2xl transition-all group-hover:w-[36rem]">
            <div className="h-full w-full bg-cover bg-center">
              <img
                src="https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fG11c2ljfGVufDB8fDB8fHww"
                alt=""
                srcset=""
              />
            </div>
            <div className="h-full w-full bg-[#455055]/80 transition-all group-hover:bg-[#31383b]/80">
            </div>
          </div>

          <section className="absolute inset-0 flex flex-col justify-between p-4 text-white">
            <header className="space-y-1">
              <div className="text-3xl font-medium">Audio Visualizer</div>
            </header>
            <div className="flex space-x-2">
              <div className="flex items-center space-x-1">
                <div>
                  <audio />
                  <button>
                    <svg
                      className="h-w-14 w-14 cursor-pointer text-white transition-all hover:text-yellow-400"
                      fill="currentColor"
                      viewBox="0 0 20 20"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        fillRule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
                        clipRule="evenodd"
                      ></path>
                    </svg>
                  </button>
                </div>
                <canvas width={500} height={200} />

                <span className="h-5 w-2 rounded-full bg-red-500"></span>

                <span className="h-5 w-2 rounded-full bg-green-500"></span>
                <span className="h-5 w-2 rounded-full bg-yellow-500"></span>
              </div>
            </div>
          </section>
        </article>
      </main>
    </main>
  );
}

export default AudioApp;

From the code, we managed to generate a rectangular card with a play button (images sourced from Unsplash). Two essential elements in the code above for the app's effective operation are the <audio> element and the <canvas> element.

The <audio> element is utilized to embed sound content within the HTML document. The <canvas> element is employed for drawing graphics, animations, or other visual content on a web page.

We need a condition to display the form input tag and the audio player. If the user has uploaded a file, we show the audio player. Otherwise, we show the file input form.

Initialization and State Setup for the Audio Player

We need to establish the initial conditions and manage the state required for the functionality of an audio player. This involves tasks like initializing the audio player and setting up state variables to track the audio file.



const [files, setFiles] = useState(null); // to store the audio file
const [uploaded, setUploaded] = useState(false); // this constraint is to determine if the audio file is available
const canvasRef = useRef(null); // to target the canvas 
const audioRef = useRef(null); // store the audio data
const source = useRef(null);
const analyserRef = useRef(null);

Since useRef hooks create references to essential elements and nodes, we utilize them in manipulating our app.

canvasRef: This useRef hook creates a reference to a canvas element. It allows us to access and manipulate the <canvas> element's properties and methods within the React.js component. In this case, it's used to draw the visualizations of the audio data on the canvas.

audioRef: Similarly, this useRef hook creates a reference to an audio element. It enables us to access and control the audio playback, such as playing, pausing, or seeking, within the React component. In this case, it's used to play the audio file uploaded by the user.

source: This useRef hook creates a reference to a Web Audio API source node. In Web Audio API usage, a source node represents the audio source, such as an <audio> element or other audio sources. This reference may be used to connect the audio source to an audio context and perform operations like analyzing audio data.

analyserRef: This useRef hook creates a reference to an AnalyserNode, which is part of the Web Audio API. AnalyserNode is used for analyzing the audio data in real-time, such as extracting frequency or time-domain data. By creating a reference to the AnalyserNode, we can access and manipulate its properties and methods within the React component.

To hide the audio player when no audio file is selected, we use the setUploaded function.



{!uploaded && (
  <div class="h-screen font-sans text-gray-900 bg-gray-300 border-box">
    <div class="flex justify-center w-full mx-auto sm:max-w-lg">
      <div class="flex flex-col items-center justify-center w-full h-auto my-20 bg-white sm:w-3/4 sm:rounded-lg sm:shadow-xl">
        <div class="mt-10 mb-10 text-center">
          <h2 class="text-2xl font-semibold mb-2">Upload your files</h2>
          <p class="text-xs text-gray-500">
            File should be of format .mp4, .avi, .mov or .mkv
          </p>
        </div>
        <form
          action="#"
          class="relative w-4/5 h-32 max-w-xs mb-10 bg-white bg-gray-100 rounded-lg shadow-inner"
        >
          <input
            type="file"
            id="file-upload"
            class="hidden"
            onChange={handleChange}
          />
          <label
            for="file-upload"
            class="z-20 flex flex-col-reverse items-center justify-center w-full h-full cursor-pointer"
          >
            <p class="z-10 text-xs font-light text-center text-gray-500">
              Upload your music here
            </p>
            <svg
              class="z-10 w-8 h-8 text-indigo-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
            </svg>
          </label>
        </form>
      </div>
    </div>
  </div>
)}

In the input tag, we set an onChange attribute that listens for changes in the form. We pass a function called handleChange to handle this event.

Next, we create a handleChange function that handles the uploaded audio file.



const handleChange = (e) => {
  setFiles(e.target.files[0]);
  setUploaded(true);
};

Now that the audio file is being saved with setFiles, we can include a condition that enables the audio player to start playing when a file is present.



{/* check if the file is uploaded successfully */}
{files && (
    <main className="flex min-h-screen w-full items-center justify-center">
        <article className="group relative flex h-[12rem] w-[50rem] overflow-hidden rounded-2xl bg-[#3a4448]">
            <div className="absolute inset-y-0 left-0 w-48">
                <img
                    src="https://unsplash.it/id/1/640/425"
                    alt=""
                    className="h-full w-full object-cover object-center opacity-95"
                />

                <div className="invisible absolute inset-0 flex h-full w-full items-center justify-center bg-[#0c0c0c]/70 opacity-0 transition-all group-hover:visible group-hover:opacity-100"></div>
            </div>
            <div className="absolute inset-y-0 left-44 w-[39rem] overflow-hidden rounded-2xl transition-all group-hover:w-[36rem]">
                <div className="h-full w-full bg-cover bg-center">
                    <img src="https://unsplash.it/id/1/640/425" alt="" srcset="" />
                </div>
                <div className="h-full w-full bg-[#455055]/80 transition-all group-hover:bg-[#31383b]/80">
                    {" "}
                </div>
            </div>

            <section className="absolute inset-0 flex flex-col justify-between p-4 text-white">
                <header className="space-y-1">
                    <div className="text-3xl font-medium">Audio Visualizer</div>
                </header>
                <div className="flex space-x-2">
                    <div className="flex items-center space-x-1">

                        <div>
                            <audio ref={audioRef} src={window.URL.createObjectURL(files)} />
                            <button onClick={handleAudioPlay}>
                                <svg
                                    className="h-w-14 w-14 cursor-pointer text-white transition-all hover:text-yellow-400"
                                    fill="currentColor"
                                    viewBox="0 0 20 20"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        fillRule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
                                        clip-rule="evenodd"
                                    ></path>
                                </svg>
                            </button>
                        </div>
                        <canvas ref={canvasRef} width={500} height={200} />

                        <span className="h-5 w-2 rounded-full bg-red-500"></span>

                        <span className="h-5 w-2 rounded-full bg-green-500"></span>
                        <span className="h-5 w-2 rounded-full bg-yellow-500"></span>
                    </div>
                </div>
            </section>
        </article>
    </main>
)}

From the code below, we passed the canvasRef to the canvas tag and audioRef to the audio element. The window.URL.createObjectURL generates a URL that can be used to reference the content of the selected file (named files) within the browser.

We created a button and passed a handleAudioPlay function, which plays the audio.

Next, we create the handleAudioPlay function.



const handleAudioPlay = () => {
  const audioElement = audioRef.current;
  if (audioElement && audioElement.readyState >= 2) {
    // Check if the audio element is loaded and ready to play
    audioElement.play();
    const audioContext = new AudioContext();
    if (!source.current) {
      source.current = audioContext.createMediaElementSource(audioElement);
      const analyser = audioContext.createAnalyser();
      analyserRef.current = analyser;
      source.current.connect(analyser);
      analyser.connect(audioContext.destination);
    }
  }
};

Visualization of the Audio Data

We create a visualizeAudio function responsible for rendering the audio data visualization on the <canvas> element and then pass it to the handleAudioPlay.



function visualizeAudio() {
  const canvasContext = canvasRef.current.getContext("2d");

  const renderFrame = () => {
    const frequencyData = new Uint8Array(analyserRef.current.frequencyBinCount);
    analyserRef.current.getByteFrequencyData(frequencyData);

    const barWidth = 5; // bar width
    let startX = 0;

    canvasContext.clearRect(
      0,
      0,
      canvasRef.current.width,
      canvasRef.current.height
    );

    for (let i = 0; i < frequencyData.length; i++) {
      startX = i * 8;

      const gradient = canvasContext.createLinearGradient(
        0,
        0,
        canvasRef.current.width,
        canvasRef.current.height
      );
      gradient.addColorStop(0.2, "#ff0000"); // Red
      gradient.addColorStop(0.5, "#00ff00"); // Green
      gradient.addColorStop(1.0, "#0000ff"); // Blue

      canvasContext.fillStyle = gradient;
      canvasContext.fillRect(
        startX,
        canvasRef.current.height,
        barWidth,
        -frequencyData[i] // bar height
      );
    }

    requestAnimationFrame(renderFrame); // Call renderFrame recursively
  };

  renderFrame(); // Start the rendering loop
}

We first retrieve the 2D rendering context of the canvas using the getContext(), which enables drawing shapes, text, and images onto the canvas. This method allows us to create dynamic visualizations based on the audio data. Within the renderFrame function, the core visualization logic unfolds. It continuously updates the visualization based on the audio data in real-time using the requestAnimationFrame. Within the loop, bars are drawn on the canvas to represent the intensity of each frequency band. Each bar's height corresponds to the frequency's intensity, creating a visual representation of the audio's spectral content. Before rendering each new frame, the canvas is cleared to remove any remnants of the previous visualization using theclearRect(). This ensures that the visualization remains clean and does not overlap or distort over time.

This code is then passed to the handleAudioPlay function as visualizeAudio.



const handleAudioPlay = () => {
  const audioElement = audioRef.current;
  if (audioElement && audioElement.readyState >= 2) {
    // Check if the audio element is loaded and ready to play
    audioElement.play();
    const audioContext = new AudioContext();
    if (!source.current) {
      source.current = audioContext.createMediaElementSource(audioElement);
      const analyser = audioContext.createAnalyser();
      analyserRef.current = analyser;
      source.current.connect(analyser);
      analyser.connect(audioContext.destination);
    }
    visualizeAudio(); // visualize audio
  }
};

Upon launching our application at http://localhost:3000/, the project becomes visible. When an audio file is uploaded, the input form disappears and is replaced by an audio player. The visualizer emerges upon clicking the play button.

Conclusion

In conclusion, audio visualizers serve as captivating features that elevate website interactivity and user engagement. By synchronizing visual elements with audio playback, they offer users a visually immersive experience while enhancing their understanding and connection with audio content. We successfully created a basic audio visualizer with the assistance of the web audio API. The possibilities of the Web Audio API are vast, allowing for complex and engaging audio experiences tailored to specific projects.

New React Updates: Using useOptimistic Hook in a NextJs app

Favour Onyeke — Wed, 31 Jan 2024 10:11:34 +0000

In the dynamic landscape of web development, React has constantly evolved, ushering in innovative solutions to enhance user experience. The latest stride in this journey comes in the form of a groundbreaking new hook, useOptimistic.

Discover how this innovative hook simplifies the implementation of optimistic updates, making your React/Nextjs applications not only faster but also more user-friendly. We’ll explore how to implement optimistic updates using React.js’s new useOptimistic hook in combination with Next.js 14 server action.

Prerequisites

Knowledge of Reactjs and Next.js.
Node.js installed.
Typescript and Tailwind.

One of the benefits of useOptimistic is its ability to display the result of a change on the user interface before the changes are effected on the server. This creates a more optimized, responsive application.

A typical web application sends user-submitted information to the server to update the database before displaying the result. This process may result in a delay before the data is shown, leading to a poor user experience. useOptimistic makes the required changes or updates in the user interface for the user to see before the data is confirmed. In the event of any issue with the data submission to the server, it will revert the changes.

Creating a Job Profile

To demonstrate the functionality of useOptimistic, I developed a basic web app named Job Profile. This app retrieves and presents essential information about people's job profiles, specifically their names and job titles. Next.js was utilized for client-side rendering and a backend configuration was implemented to communicate with an external API for fetching and sending relevant data.

Using this setup, we can compare the outcomes when useOptimistic is enabled.

To send data to the backend in a simple form, Server actions will be used. More details about server action can be found on Nextjs.

Note: This project relies on TypeScript and Tailwind CSS. When installing Next.js, be sure to include TypeScript and Tailwind CSS.

Since this is a simple project, we will create the initial form (without the useOptimistic hook) on the page.tsx file.

To render the form, here's the JSX code in the return section of the Home component, after removing unnecessary starter codes and styles.



export default async function Home() {
  return (
    <main>
      <h1 className="text-3xl font-bold text-center">Job profile</h1>
      <form className="flex flex-col gap-5 max-w-xl mx-auto p-5">
        <input
          name="name"
          type="text"
          className="border border-gray-300 p-2 rounded-md"
          placeholder="Enter your name..."
        />
        <input
          name="job"
          type="text"
          className="border border-gray-300 p-2 rounded-md"
          placeholder="Your job"
        />
        <button className="border bg-green-500 text-white p-2 rounded-md">
          Add Job
        </button>
      </form>
    </main>
  );
}

API Call for the Job Profile Application

For this project, we will use mock API data obtained from SandAPI. SandAPI assists in managing API endpoints, which is crucial for our application, and in generating dummy data so that we do not need to be concerned about the database of our application.

After creating an account on SandAPI, click on the "Create a New API" button at the top right and fill in the information as shown in the image.

Click on the "Auto-generate" button below to produce fabricated data. This will prompt fields to appear, enabling the user to specify the type of data to be generated. Once the value displayed in the image below has been entered into the designated field, select "Create Endpoint".

Getting data from the API endpoint

Within the Page.tsx file, an API request must be made to display the dummy data that has been created. As TypeScript is being utilized, it is necessary to specify the type of data being requested, which has been designated as Job. The data can be retrieved by using the API endpoint from SandAPI.



export interface Job {
  sand_id?: number;
  name: string;
  job: string;
}
//in the Home component, insert this code before the return function in the Home component
("use server");
const res = await fetch("https://api.sandapi.com/user_wFnZRo/jobs", {
  cache: "no-cache",
  next: {
    tags: ["job"],
  },
});
const data: Job[] = await res.json();

To display the data, we iterate through each object in the array and present it. We insert this code below the form.



<main>
  <h2 className="font-bold p-5">List of Jobs</h2>
  <div className="grid gap-x-8 gap-y-4 grid-cols-3">
    {data.map((jobs) => {
      const { sand_id, name, job } = jobs;
      return (
        <div key={sand_id} className="p-6 shadow">
          <p className="mt-6 text-2xl font-bold text-gray-900 sm:mt-10">
            {name}
          </p>
          <p className="mt-6 text-base font-bold text-gray-600">{job}</p>
        </div>
      );
    })}
  </div>
</main>;

The result should be this in the user interface.

Adding New Jobs

The values entered in the form field need to be updated in our list by sending a POST request. To do this, an action attribute must be added to the form tag and a function called addJob needs to be passed.

Create a new function called addJob that will allow us to add more items to our dummy data by using the information submitted on the form. The initial step is to add the "use server" since this information is retrieved from the server side of our application.

To add the data from the form, we'll use the get() callback to retrieve the value of the input element with the name attribute name or job.

Next, we create an object named newJob using the values obtained from the form. This object will be passed as a POST request to the API endpoint. This will enable the addition of new data to our dummy data.

The page.tsx file should reflect the following structure.



import { revalidateTag } from "next/cache";

export interface Job {
  sand_id?: number;
  name: string;
  job: string;
}

export default async function Home() {
  ("use server");
  const res = await fetch("https://api.sandapi.com/user_wFnZRo/jobs", {
    cache: "no-cache",
    next: {
      tags: ["job"],
    },
  });
  const data: Job[] = await res.json();
  //addJob responsible for adding a new Job profile
  const addJob = async (e: FormData) => {
    "use server";
    const name = e.get("name")?.toString();
    const job = e.get("job")?.toString();
    if (!name || !job) return;
    const newJob: Job = {
      name: name,
      job,
    };
    await fetch("https://api.sandapi.com/user_wFnZRo/jobs", {
      method: "POST",
      body: JSON.stringify(newJob),
      headers: {
        "Content-Type": "application/json",
      },
    });
    revalidateTag("job");
  };
  return (
    <main>
      <h1 className="text-3xl font-bold text-center">Job profile</h1>
      <form
        action={addJob}
        className="flex flex-col gap-5 max-w-xl mx-auto p-5"
      >
        <input
          name="name"
          type="text"
          className="border border-gray-300 p-2 rounded-md"
          placeholder="Enter your name..."
        />
        <input
          name="job"
          type="text"
          className="border border-gray-300 p-2 rounded-md"
          placeholder="Your job"
        />
        <button className="border bg-green-500 text-white p-2 rounded-md">
          Add Job
        </button>
      </form>
      <main>
        <h2 className="font-bold p-5">List of Jobs</h2>
        <div className="grid gap-x-8 gap-y-4 grid-cols-3">
          {data.map((jobs) => {
            const { sand_id, name, job } = jobs;
            return (
              <div key={sand_id} className="p-6 shadow">
                <p className="mt-6 text-2xl font-bold text-gray-900 sm:mt-10">
                  {name}
                </p>
                <p className="mt-6 text-base font-bold text-gray-600">{job}</p>
              </div>
            );
          })}
        </div>
      </main>
    </main>
  );
}

The inserted values in the form will be displayed in the rendering section.

Without the useOptimistic hook integrated into the form, the Job Profile app would rely on the traditional method of updating the user interface only after the server has confirmed the changes. When a user creates a new job profile, the app must wait for the server to process the update and confirm it before displaying the revised information. As a result, there is a slight delay in adding form input to the list.

Optimizing the display using useOptimistic

To improve the user experience of the app, we can use theuseOptimistic hook. To implement this, it is necessary to create a file named form.tsx.

All the JSX elements from page.tsx can be transferred to form.tsx, and the essential data gotten from the API can be passed as props, denoted as job. Furthermore, the addJob function should be removed as it will be configured in the form.tsx file.

To cache the data transmitted to the server, a function named validateData needs to be created. This function will invoke the server action named revalidatePath, and we can pass this validateData as props in the form.tsx file.

Upon implementing these adjustments, thepage.tsx file should reflect the following structure.



import { revalidatePath } from "next/cache";
import Form from "./components/form";
import React from "react";

export interface Job {
  sand_id?: number;
  name: string;
  job: string;
}
//the addJob is moved to form.tsx
export default async function Home() {
  ("use server");
  const res = await fetch("https://api.sandapi.com/user_wFnZRo/jobs", {
    cache: "no-cache",
    next: {
      tags: ["job"],
    },
  });
  const data: Job[] = await res.json();

  //The validateData function calls revalidatePath to purge cached data for a specific path.
  const validateData = async () => {
    "use server";
    revalidatePath("/jobs");
  };
  //We add the Form component that houses the form section of the app in Form.tsx.
  // Next, we include the two props, "jobs" and validateData.
  return (
    <main>
      <Form jobs={data} validateData={validateData} />
    </main>
  );
}

Both the jobs props and validateData functions will be destructured in the form.tsx file.

Importing useOptmistic to the app

In the form.tsx, we first destructure the useOptimistic hook from React.



"use client";
import { useOptimistic } from "react";

The useOptimistic hook has two values - the optimistic state (called optimisticJob) and a function (called addOptimisticJob). The jobs props from page.tsx are passed to the useOptimistic hook to track any changes in the server's data and update it accordingly. By passing the props to useOptimistic, we can now replace the old data with the new optimisticJob variable.



"use client";
import { useOptimistic } from "react";

type JobType = {
  sand_id?: number;
  name: string;
  job: string;
};
type JobProps = {
  jobs: JobType[];
  validateData: any;
};

export default function Form({ jobs, validateData }: JobProps) {
  const [optimisticJob, addOptimisticJob] = useOptimistic(
    jobs,
    (state, newJob: JobType) => {
      return [...state, newJob];
    },
  );

  return (
    <main>
      <h1 className="text-3xl font-bold text-center">Job profile</h1>
      <form className="flex flex-col gap-5 max-w-xl mx-auto p-5">
        <input
          name="name"
          type="text"
          className="border border-gray-300 p-2 rounded-md"
          placeholder="Enter your name..."
        />
        <input
          name="job"
          type="text"
          className="border border-gray-300 p-2 rounded-md"
          placeholder="Your job"
        />
        <button className="border bg-green-500 text-white p-2 rounded-md">
          Add Job
        </button>
      </form>

      <h2 className="font-bold p-5">List of Jobs</h2>
      <div className="grid gap-x-8 gap-y-4 grid-cols-3">
        {/* We then change data to optimisticJob */}
        {optimisticJob.map((singleJob) => {
          const { sand_id, name, job } = singleJob;
          return (
            <div key={sand_id} className="p-6 shadow">
              <p className="mt-6 text-2xl font-bold text-gray-900 sm:mt-10">
                {name}
              </p>
              <p className="mt-6 text-base font-bold text-gray-600">{job}</p>
            </div>
          );
        })}
      </div>
    </main>
  );
}

Updating the User Interface

For updating values, we create the addJob function. This is responsible for submitting our data to the database.

It's essential to call the validateData function inside the addJob function to clear cached data for a particular path. The form.tsx file should have this code structure to ensure everything works as expected.



"use client";
import { useOptimistic } from "react";

type JobType = {
  sand_id?: number;
  name: string;
  job: string;
};
type JobProps = {
  jobs: JobType[];
  validateData: any;
};

export default function Form({ jobs, validateData }: JobProps) {
  const [optimisticJob, addOptimisticJob] = useOptimistic(
    jobs,
    (state, newJob: JobType) => {
      return [...state, newJob];
    },
  );
  //the addJob function
  const addJob = async (e: FormData) => {
    const name = e.get("name")?.toString();
    const job = e.get("job")?.toString();
    if (!name || !job) return;

    const formInput = {
      name,
      job,
    };

    addOptimisticJob(formInput);

    await fetch("https://api.sandapi.com/user_wFnZRo/jobs", {
      method: "POST",
      body: JSON.stringify(formInput),
      headers: {
        "Content-Type": "application/json",
      },
    });
    await validateData();
  };

  return (
    <main>
      <h1 className="text-3xl font-bold text-center">Job profile</h1>
      <form
        action={addJob}
        className="flex flex-col gap-5 max-w-xl mx-auto p-5"
      >
        <input
          name="name"
          type="text"
          className="border border-gray-300 p-2 rounded-md"
          placeholder="Enter your name..."
        />
        <input
          name="job"
          type="text"
          className="border border-gray-300 p-2 rounded-md"
          placeholder="Your job"
        />
        <button className="border bg-green-500 text-white p-2 rounded-md">
          Add Job
        </button>
      </form>

      <h2 className="font-bold p-5">List of Jobs</h2>
      <div className="grid gap-x-8 gap-y-4 grid-cols-3">
        {/* We then change data to optimisticJob */}
        {optimisticJob.map((singleJob) => {
          const { sand_id, name, job } = singleJob;
          return (
            <div key={sand_id} className="p-6 shadow">
              <p className="mt-6 text-2xl font-bold text-gray-900 sm:mt-10">
                {name}
              </p>
              <p className="mt-6 text-base font-bold text-gray-600">{job}</p>
            </div>
          );
        })}
      </div>
    </main>
  );
}

By examining the code, it becomes evident that we invoked the addOptimisticJob function on the data received from the form before dispatching it to the server. This approach initially updates the value in the UI component and then sends it to the backend for further processing. In the event of a failed update, the item gets removed from the UI.

The result should be this:

As a result of this process, the data is displayed to the user immediately before being saved to the database, as depicted in the image above.

Conclusion

By demonstrating the functionality of useOptimistic in the Job Profile app, it becomes clear that this hook significantly enhances the user experience by eliminating delays and creating a more fluid and responsive interface for users to interact with.

In the event of any issues with the data submission to the server, useOptimistic also ensures that the changes made on the user interface are reverted, maintaining data integrity and providing a safety net for potential errors.

Cross-site Scripting and how to fix it

Favour Onyeke — Thu, 19 Oct 2023 20:31:14 +0000

Cross-site Scripting and how to fix it.

Cross-site scripting (XSS) is the most common form of web application vulnerability.

Cross-site scripting (XSS) is a type of vulnerability that allows attackers to inject malicious code into web applications. XSS attacks present a variety of challenges for both developers and security professionals but they can be prevented by taking steps to prevent attackers from inserting malicious scripts into web applications.

(I would be using Nodejs on the side of the codes, This shouldn’t discourage you if you are using any other backend framework, it still applies to you (not necessarily the terms).

XSS can occur due to many reasons including placing special characters in URLs and HTML forms, sending user input through email or messengers, and even fully injecting malicious code into an existing website.

This can happen on any kind of website that doesn’t control user input. The most common form of XSS exploits can be viewed in different ways: by passing through HTML forms, via email, or by simply visiting compromised websites. XSS is a leading cause of security issues for web applications and servers across internet platforms.

An Instance of XSS flaws

I created a simple form with just Html and CSS that displays what happens in a web application that is prone to cross-site scripting. An attacker attaches a script tag to the text area of the form.

An Instance of XSS flaws

I created a simple form with just Html and CSS that displays what happens in a web application that is prone to cross-site scripting. An attacker attaches a script tag to the text area of the form.

Looking at this form, you see I inputted an event listener (onmouseover) which gets triggered once the user hovers over the HTML tag. It triggers the alert function with the text “Wuff”. This is just a simple code that runs on a web browser on a site that’s prone to cross-site scripting. In some cases where there is authentication in play, an attacker can input codes that can extract the cookies of the user where the session is stored which keeps the user authenticated and could use the user’s cookies to impersonate the user.

How to Prevent XSS

To keep yourself safe from XSS, you must sanitize your input. As you know All XSS attacks affect your website through some form of client-side user input, Your application code should never output data received as input directly to the browser without checking it for malicious code. I will outline how you could fix this:

Filtering for XSS (Sanitization):

Filtering for XSS is a security feature that allows you to block malicious content from being displayed on your site. This blocks code from running on the server, preventing website attacks and making it impossible for an attacker to execute malicious code remotely. This filter would remove dangerous keywords, for example, the infamous <script> tag, JavaScript commands, CSS styles, and other dangerous HTML markups (such as those that contain event handlers.) You could do that using some server-side (in PHP, ASP, or some other web-enabled development language) codes but I would suggest you use a library to be on the safe side.

If you are using Java, then a good place to go is the OWASP Java Encoder Project.
For PHP, there is a comprehensive library called HTML Purifier, which boasts strict standards compliance and better features than other filters.

For Nodejs developers, You could use a validator package. Once you have installed the npm package, You need to require it.

const validator = require('validator')

Using the escape() will replace certain characters (i.e. <, >, /, &, ‘, “) with the corresponding HTML entity.

For instance

let userInput = `A XSS hack<**script** onmouseover="alert('Xss');"></**script**>`;

**let** sanitizedInput = validator.escape(userInput);

The output is treated by replacing each of the syntaxes with their corresponding HTML entity tag.

XSS flows

&lt;scriptonmouseover=&quot;alert(&#x27;XSShack&#x27;);&quot;&gt;&lt;&#x2F;script&gt;

Restrict User Input:

Restrict the type of input a user can submit in your form through validation. For instance, if you have an input field for an email, only allow input with the email format. This way, you minimize the chances of attackers submitting bad data. You can also use the validator package for this. This can be done on the backend still using the validator package.

check('username', 'Username must be an email address').isEmail()

The above code makes it paramount that the username the user is submitting is an email, else it displays an error message(“Username must be an email address”).

Implement httpOnly and Secure cookie

Cookies typically store session identifiers that may offer full access to an account, therefore if a cookie is intercepted, a session can be hijacked by someone who is not the real user but pretending as that user. With this cookie, the attacker can impersonate you on your account and have access to everything you do the user should have.

For this reason, it’s very important to set up the required settings to make cookies more secure and this can be achieved by paying attention to the below two things; The **httpOnly **flag and the **secure **flag.

Here’s an example of an httpOnly implementation in Nodejs using express.

**app**.use(**express**.session({

secret: "secret",

cookie: {

httpOnly: true,

secure: true

}

}))

(You must have installed the session package and “required” it)

Setting the httpOnly and secure object to true makes the attacker try to access the cookie with the httpOnly tag set to true as shown above, they would receive an empty string.

While creating a robust application, You can have a lot of security challenges, so it is necessary to pay attention to all of them since attackers can take advantage of vulnerabilities in your application to inject malicious code into your server, always ensure you sanitize user input.

Creating a simple category in React using Set()

Favour Onyeke — Wed, 18 Oct 2023 16:34:14 +0000

Categorizing data based on a feature can be a steep learning curve for beginners. In JavaScript, creating a category typically refers to creating a custom object with specific properties and methods that can be used to perform certain tasks.

Prerequisite:

Solid knowledge of JavaScript, importing objects in a file, mapping, and functions. Basics of React hooks(useState), components, and props.

Set

Set() is a constructor function that creates a new Set object. In JavaScript, a constructor function is a special type of function that is used for creating and initializing objects. It serves as a blueprint or a template for creating multiple objects of the same type. Constructor functions are typically used with the “new” keyword to instantiate new objects.

So to create a set constructor is:

const firstSet = new Set();

Set can help in storing unique values like our category values. Set has some important methods but would like to talk about two. like add() which adds a new element to the Set and has() which returns true if a value exists. For more information, visit MDN.

Setting an image Gallary

We are to build an image gallery like Unsplash. We would be using the set constructor. The first step for this tutorial is to initialize a React project. In this tutorial, We would be using Vite, Check out why. To initialize a React project, you need to open up your terminal and, in your desired folder, run the commands below:

npm create vite@latest

I will name this project pictureApp. Follow the steps and select react. Move to the folder directory using the cd command.

cd pictureApp

Lastly, run this, this will install all the folders and Vite dependencies.

npm install && npm run dev

Inside the src folder, create two files; App.jsx(Vite might have created this, don’t bother) and Categories.jsx.

Setting up the Data for manipulation:

I have created an array of objects, each object contains properties pertaining to a particular image. Create a data.js file in the src folder. Copy this code to the file. All the images are derived from Unsplash.

const pictures = [
  {
    id: 1,
    title: "portrait of a lady",
    category: "portrait",
    image:
      "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60",
  },
  {
    id: 2,
    title: "Lilac-breasted Roller",
    category: "Animals",
    image:
      "https://images.unsplash.com/photo-1535083783855-76ae62b2914e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=435&q=80",
  },
  {
    id: 3,
    title: "portrait of a handsome man",
    category: "portrait",
    image:
      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHBvcnRyYWl0fGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60",
  },
  {
    id: 4,
    title: "Beautiful Mountain",
    category: "Nature",
    image:
      "https://images.unsplash.com/photo-1682685797439-a05dd915cee9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60",
  },
  {
    id: 5,
    title: "Tiger",
    category: "Animals",
    image:
      "https://images.unsplash.com/photo-1591824438708-ce405f36ba3d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80",
  },
  {
    id: 6,
    title: "An african American",
    category: "portrait",
    image:
      "https://images.unsplash.com/photo-1521119989659-a83eee488004?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=423&q=80",
  },
  {
    id: 7,
    title: "Sea Waves",
    category: "Nature",
    image:
      "https://images.unsplash.com/photo-1505144808419-1957a94ca61e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fG5hdHVyZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60",
  },
  {
    id: 8,
    title: "Cute Cat",
    category: "Animals",
    image:
      "https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YW5pbWFsc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60",
  },
  {
    id: 9,
    title: "portrait of a black lady",
    category: "portrait",
    image:
      "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHBvcnRyYWl0fGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60",
  },
];
export default pictures;

Styling the page.

For the styling of the webpage. We create an index.css in the src folder. Paste this CSS code for styling the document.

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 400;
}
:root {
  font-size: 10px;
  --padding: 3rem;
}
::-moz-selection {
  background: rgb(17, 17, 17, 0.99);
  color: rgb(89, 89, 89);
}
::selection {
  background: rgb(17, 17, 17, 0.99);
  color: rgb(89, 89, 89);
}
html {
  font-family: "Wildtype", -apple-system, BlinkMacSystemFont, sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: "Wildtype", -apple-system, BlinkMacSystemFont, sans-serif;
  }
}
body {
  background: #1a1a1a;
  color: white;
  margin: 0 auto;
  max-width: 150rem;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
p,
a,
span {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h4 {
  font-size: 20px;
  color: #abbc4e;
  line-height: 1.3;
}

a {
  text-decoration: none;
  color: white;
  -webkit-filter: brightness(0.8);
  filter: brightness(0.8);
  -webkit-transition: 150ms;
  -o-transition: 150ms;
  transition: 150ms;
}
a,
a * {
  border-radius: 0.15rem;
}
a:hover {
  -webkit-filter: brightness(1.09);
  filter: brightness(1.09);
}
.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;
  grid-template-columns: repeat(6, 1fr);
  grid-row-gap: 1.5rem;
  grid-column-gap: 1.5rem;
  margin: auto;
}
.project-grid {
  -ms-grid-column: 1;
  grid-column-start: 1;
  -ms-grid-column-span: 7;
  grid-column-end: span 7;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr 2rem 1fr 2rem 1fr 2rem 1fr;
  grid-template-columns: repeat(6, 1fr);
  grid-row-gap: 15rem;
  grid-column-gap: 2rem;
  margin: 6rem auto;
}
.project-grid a {
  -ms-grid-column-span: 2;
  grid-column: span 2;
  color: white;
  min-height: 56.25%;
}
.project-grid a h3 {
  font-size: 2.15rem;
  margin: 1.25rem 0;
}
.project-grid a p {
  font-size: 1.5rem;
  color: lightgrey;
}
.project-grid a img {
  margin-bottom: 0;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.btn {
  cursor: pointer;
  color: rgb(0, 0, 0);
  background: #b0afaf;
  border: transparent;
  border-radius: 0.25rem;
  letter-spacing: 1px;
  padding: 25px 10px;
  margin: 0 10px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: 0.3s ease-in-out all;
  text-transform: capitalize;
  display: inline-block;
}
.btn:hover {
  background: #585858;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
main {
  padding: 3rem var(--padding);
}
@media (max-width: 960px) {
  :root {
    font-size: 9px;
  }
  .intro {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 7;
    grid-column-end: span 7;
  }
  .project-grid {
    grid-row-gap: 16rem;
  }
  .project-grid a h3 {
    font-size: 2.5rem;
    margin-bottom: 1.15rem;
  }
  .project-grid a {
    -ms-grid-column-span: 3;
    grid-column: span 3;
  }
}
@media (max-width: 700px) {
  :root {
    font-size: 8px;
    --padding: 2rem;
  }
  .project-grid {
    grid-row-gap: 24rem;
  }
  .project-grid a {
    -ms-grid-column-span: 6;
    grid-column: span 6;
  }
  .project-grid a h3 {
    font-size: 3rem;
    margin-top: 2rem;
  }
  .project-grid a p {
    font-size: 1.75rem;
  }
  .project-grid a img {
    width: 100vw;
    margin: auto calc(50% - 50vw);
  }
}
@media (min-width: 4000px) {
  :root {
    font-size: 40px;
  }
}

We would be using this CSS styling across the site.

Setting up the Image Gallary:

Import the data.js in the App.js. In the React component named App, We would be creating an instance of an image and using Map to create instances of every object.

import React from "react";
import data from "./data";
import "./index.css";
function App() {
  return (
    <main className="grid">
      <section className="project-grid">
        {data.map((pic) => {
          return (
            <a href="#" key={pic.id}>
              <img src={pic.image} alt={pic.title} loading="lazy" />
              <h3>{pic.title}</h3>
              <h4>{pic.category}</h4>
            </a>
          );
        })}
      </section>
    </main>
  );
}
export default App;

The above code creates an instance of an image, and then maps all the objects in the data array to multiple instances of images. Make sure you imported the index.css for the document styling. You should have a result like this if you follow through.

Setting up the categories using the Set object

Before we set up the filtering button for the categories, we need to set up a state value for the images. This will enable React to re-render the updated or categorized list in the component. To do this, we add this code to the App component.

const [image, setImage] = useState(data);

We need to update the return JSX code to this state(image). We change data used in mapping through the array of objects to image which is the state in the return block.

Due to the fact a Set constructor stores unique values. One of the benefits of the Set() constructor is it ignores any value duplicated.

//This Creates a new set
let myFirstSet = new Set();
// Add values to the set
myFirstSet.add();
myFirstSet.add(2);
myFirstSet.add(3);
// Add a duplicate value (ignored)
myFirstSet.add(1); 
// the result is still {1,2,3}
console.log(myFirstSet)

To create a new set, we need to extract the categories of each of the objects. We map through the objects and assign them to ourCategories variable on the App.js.

const ourCategories = data.map((image) => {
  return image.category;
});
console.log(ourCategories) 
//["portrait", "Animals","portrait","Nature","Animals","portrait","Nature","Animals","portrait"]

Using the new set, we create an object from the category with no duplicate.

const ourCategories = data.map((image) => {
  return image.category;
});
const objectCategories = new Set(ourCategories); // {'portrait', 'Animals', 'Nature'}

Setting up a Button to Display Items Based on the Category:

Create a useState in the App component and pass the categories.

const [categories, setCategories] = useState(allCategories);

In other not to create a clustered code environment, create a new React file in src folder named Categories.jsx. Categories.jsx would handle the button to filter images. Create a component in Categories.jsx named Categories. We would pass both the function to filter the array with the category name and the state value categories.

Create a function in the app component that accepts a parameter (‘cat’ or any name). Filter through the array using the include method. It returns all the categories with the same name as the one been passed. For the “all” button, we pass a condition that returns all the elements of the array(data) if the category is all.

const filterImage = (cat) => {
    if (cat === "all") {
      setImage(data);
      return;
    }
    const filteredImage = data.filter((item) => item.category === cat);
    setImage(filteredImage);
  };

We need to pass the state(categories) and function(filterImage) to the Categories page as props naming them category and filterImage respectively.

In the Categories.jsx, destructure the props(which are category and filterImage).

Map through each of the category (props) array and create a button inserting the value of the props in.

function Categories({ category, filterImage }) {
  return (
    <>
      {category.map((cat) => {
        return (
          <button
            key={cat}
            className="btn"
            onClick={() => {
              filterImage(cat);
            }}
          >
            {cat}
          </button>
        );
      })}
    </>
  );
}
export default Categories;

This the complete app.jsx code

 import React, { useState } from "react";
import data from "./data";
import "./index.css";
import Categories from "./Categories";
const ourCategories = data.map((image) => {
  return image.category;
});
const objectCategories = new Set(ourCategories);
const allCategories = ["all", ...objectCategories];
function App() {
  const [image, setImage] = useState(data);
  const [categories, setCategories] = useState(allCategories);
  const filterImage = (cat) => {
    if (cat === "all") {
      setImage(data);
      return;
    }
    const filteredImage = data.filter((item) => item.category === cat);
    setImage(filteredImage);
  };
  return (
    <main className="grid">
      <Categories category={categories} filterImage={filterImage} />
      <section className="project-grid">
        {image.map((pic) => {
          return (
            <a href="#" key={pic.id}>
              <img src={pic.image} alt="" loading="lazy" />
              <h3>{pic.title}</h3>
              <h4>{pic.category}</h4>
            </a>
          );
        })}
      </section>
    </main>
  );
}
export default App;

And the Categories.jsx block of code.

import React from "react"; function Categories({ category, filterImage }) { return ( <> {category.map((cat) => { return ( <button key={cat} className="btn" onClick={() => { filterImage(cat); }} > {cat} </button> ); })} </> ); } export default Categories;

You should have a result like this.

3 Best Productivity I recommend for software developers

Favour Onyeke — Wed, 18 Oct 2023 16:04:35 +0000

It’s always an exciting experience when you have software that can speed your workflow. That’s where productivity software comes in! These handy little tools can help you streamline your work process, stay organized, and (fingers crossed) actually make your job a bit easier.

We’ll three powerful tools that will have you saying, ‘Where have you been all my life?’ So, without further ado, let’s dive into the best productivity software a web developer can’t do without! I handpicked the best productivity software for a web developer’s needs. From project management platforms that keep your team on track to collaboration platforms that are as sleek as they are powerful, we’ll explore everything you need to supercharge your productivity.

1. Todoist:

Let’s face it, keeping track of all your tasks and deadlines can feel like herding cats. Enter Todo software — your new best friend in the quest for organization and task management.

Imagine having a virtual assistant that can help you prioritize your workload, set reminders, and ensure that no task falls through the cracks. That’s exactly what Todoist does. With its intuitive interface, you can create to-do lists, break down complex projects into smaller, manageable tasks, and set due dates to keep yourself on track.

But the beauty of Todoist software doesn’t stop there. It goes beyond just being a digital task list. It offers features like notifications, recurring tasks, and the ability to share lists with team members. This makes it an invaluable tool for collaborating with others and keeping everyone on the same page.

FEATURES:

· Subprojects

· Create Template Task.

· Abilty to Integrate with Zapier, IFFT, and much more.

2. Codecayon:

Next up on our list of productivity-boosting tools for web developers is Codecayon. Imagine having access to a treasure trove of pre-made, high-quality code snippets, templates, themes, and plugins at your fingertips. Codecanyon is an online marketplace that connects developers with a vast community of talented coders and designers. Here, you’ll find a wide range of meticulously crafted code snippets, and a vast collection of plugins and add-ons that can be seamlessly integrated into your projects.

By utilizing Codecanyon marketplace, web developers can tap into the expertise of experienced professionals and leverage their pre-built solutions. This allows you to focus on the unique aspects of your projects and bring them to life in a fraction of the time it would take to code everything from scratch.

FEATURES:

· An array of Templates for WordPress, HTML 5, and more to work with.

· Ability to pay for just the Code snippets and WordPress plugins you need.

· Used in countless projects.

3. LUCID SUITE

Last, but definitely not least, on our list of productivity software for web developers is Lucid Suite. As a web developer, collaborating with team members and clients can be a daunting task, especially when there are different ideas and opinions involved. This is where Lucid Suite comes in, offering a range of collaborative tools designed to streamline your team’s workflow.

I personally love LucidSuite. I have struggled with the issue of not following through with my ideas due to no laid-out steps and who plays a particular role in each stage.

LucidSpark helps to create flowcharts, and diagrams with flexibility to change any part of it. A flowchart is very necessary for product development. LucidSuite consists of 3 packages; LucidChart, LucidSpark, and **LucidScales. **I love it could be integrated with powerful apps as well.

All these tools work together to give web developers a powerful collaborative suite that can help them stay organized and productive. Whether you’re working in a remote team or collaborating with clients across different time zones, Lucid Suite simplifies your workflow and ensures that everyone is on the same page. This is a subscription that’s worth it as a web developer.

FEATURES:

· Create sticky notes, charts whiteboards.

· Team voting for the best idea to implement

· Vast array of Templates

By utilizing these productivity tools, web developers can streamline their workflow, save time on repetitive tasks, enhance collaboration, and ultimately improve their overall productivity.