DEV Community: David Bilson

🔐 WTF is JWT? And Why Your Frontend Should Care

David Bilson — Fri, 18 Apr 2025 16:35:14 +0000

This flew over my head since 2022 — you and every dev before their JWT awakening.

You're not alone if you've ever felt confused about JWTs (JSON Web Tokens). But today, let’s break it down in plain English, with enough sauce to make it stick.

🚀 What the Heck is JWT?

JWT = a secure way to send user data from server → client.
But not just any data — usually:

{
  "id": "user_id_123",
  "email": "david@email.com",
  "role": "admin"
}

The server takes this, signs it, and sends it back to the frontend as a token. That token is your magic key to access protected routes.

🔄 JWT Flow in the Real World

Here’s the flow that makes you look like a senior dev:

User logs in → Server sends a JWT back.
Frontend stores the token (usually in localStorage or a secure cookie).
On every request, frontend sends it back to the server via the Authorization header.
Backend checks it, confirms it’s not tampered with, and knows who’s talking.

🧠 What Does the Frontend Do With It?

🔥 This is where your aha moment lives.

JWT on the frontend = no need to persist user manually.

Instead of saving user data in Zustand or Redux, just:

Store the token in localStorage.

Decode it when needed to get stuff like userId, email, etc.

npm install jwt-decode

import jwtDecode from "jwt-decode";

const token = localStorage.getItem("token");

if (token) {
  const decoded = jwtDecode(token);
  console.log(decoded.id); // user ID from token payload
}

Yes — it’s that simple. You don’t even verify it on the frontend (that’s backend’s job).

⚠️ Zustand vs JWT — Who Wins?

Zustand is 🔥 for managing state in the moment, but it doesn’t persist user sessions on its own.

Instead:

Use JWT to persist auth state

Optionally: Decode and drop relevant info into Zustand for quick access.

💡 TL;DR

JWT = user's data + secret sauce (signature)
Sent from backend → stored on frontend
Frontend decodes it to know the logged-in user
No need to save full user info manually
Send it back to the server with every request as proof of identity

🔓 BONUS: Pro Tips

Don’t trust the token blindly — always verify on the backend.
Don’t store sensitive info inside (like passwords).
Use httpOnly cookies instead of localStorage if you're paranoid about security.
Use jwt-decode on the frontend — don’t try to decode manually, your brain deserves better.

👑 Final Words

JWT is not magic. It’s just a clever way to carry a user’s identity like a digital passport. Once you get the hang of it, everything else about authentication starts to click.

Now go flex that knowledge in your code — or better yet, drop it on X like:

“I just decode the JWT on load and store the user’s ID in Zustand — keeps it clean.”

Boom! Instant clout!

How to Fix Vercel 404 error: Child URL Path Issues

David Bilson — Wed, 11 Oct 2023 10:00:04 +0000

Vercel is a popular hosting platform for front-end applications, offering various deployment and hosting features. Deploying a React app to Vercel is a straightforward process, but it can become problematic when you need to handle redirects from child paths to the root.
When deploying a React app, you might encounter a situation where your child paths aren't automatically redirected to the root, causing unexpected behavior in your application. After having the page deployed, for example, https://yourwebsite.vercel.app, this path loads successfully, right? But once you navigate to a different route on the page and try to refresh, you'll usually see a 404 error like the one below.

There are cases whereby you would want to show someone a specific page on your react app, and you would want to give them the exact URL to that page, for example, https://yourwebsite.vercel.app/contact-page. If the person loads the page, they will get a 404 error simply because Vercel fails to load the child path from the root.

I assume you already have your app built and deployed on Vercel? If you haven't, please do so. Let's say you already have a React app with multiple routes, and your app is hosted on Vercel. When you visit a child path of your app, such as https://yourapp.vercel.app/child, you might expect it to redirect to the root path (https://yourapp.vercel.app/), but it doesn't happen by default. This can lead to issues like broken links, incorrect rendering, and a poor user experience.

To solve this problem, you can use Vercel's "rewrites" feature. "rewrites" allows you to configure how requests are handled, including URL redirection. In this case, you want to redirect all child paths to the root path.

Create a vercel.json file within the root folder of your project.

Then paste the code below within the json file:



{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

"rewrites" specifies the rules for URL rewrites.
{ "source": "/(.*)", "destination": "/" } tells Vercel that for any URL path that matches /(.*) (essentially any path), redirect the request to the root path (/).
Ensure you push these new changes to update your repository.

By adding this simple configuration in the vercel.json file, you can resolve this issue. With this configuration in place, your React app will redirect child paths to the root path, ensuring that all your routes work as intended.

How to Setup Tailwind CSS in React JS with VS Code

David Bilson — Sat, 23 Sep 2023 20:11:32 +0000

Tailwind CSS has gained popularity among front-end developers due to its utility-first approach and flexibility. It allows developers to build modern and responsive user interfaces with ease and speed.

When combined with React JS, Tailwind CSS becomes an even more potent tool for creating visually appealing and efficient web applications.
This tutorial will guide you through the step-by-step process of setting up Tailwind CSS in a React project using Visual Studio Code (VS Code). By the end of this guide, you will have a fully functional React application with Tailwind CSS integrated and ready for deployment.

Prerequisites

Before we begin, ensure that you have the following installed on your system:

Node.js and npm:

To set up a React application, you need Node.js and npm installed on your computer. Download and install the latest LTS version of NodeJS from the official Node.js website.
To download the latest version of npm, on the command line, run the following command:



npm install -g npm

Visual Studio Code (VS Code):

VS Code is a popular code editor that provides a seamless development experience for developers. It is the most preferred IDE if you want to develop your application with the best experience. You can download it for free from the official VS Code website and install it on your computer.

Step 1:

Create a New React Application Using Vite

Vite is a better alternative to CRA (create-react-app). It provides a faster and leaner development experience for modern web projects built with React, Angular, or Vue. Vite is popularly known for speed, efficiency, lightweight, and simplicity. Learn more about Vite here.

To install a React application using Vite, open your terminal or command prompt and navigate to the root directory where you want to install the React project.
Then, run the following command to create a new application



npm create vite@latest

You will be asked in the terminal to write the name of the project. For the sake of this tutorial, I will be going with "tailwind-setup" as the project name.
Thereafter, you will be asked to select a framework to work with. Select React.

You will be asked to select a variant. Select JavaScript.

Afterward, navigate to the project directory using the command cd project-name. Since the name of this project is tailwind-setup, we will enter the project directory and execute the following commands.

Enter the project directory



 cd tailwind-setup

Run npm install to install the necessary packages and dependencies for the React project.



 npm install

After installing the packages and dependencies, you need to open VS Code editor with the current directory. To do that, run the command below



 code .

A new window will be opened up and you will be able to access the project files from the side bar (also known as the Explorer).

Step 2:

Install Tailwind CSS

When you want to install Tailwind in React, you have to remember that you installed this React project with Vite. To avoid dependency issues, you must install Tailwind for Vite React. You will find the installation guide on Tailwind Docs. The first installation guide (Tailwind CLI) on the docs points to general installation. Click on (Framework Guides)

This will show you a list of frameworks to pick from. Select Vite.

You will be brought to this page

You already have React installed using Vite, so we just have to install Tailwindcss and its peer dependencies with the command:



npm install -D tailwindcss postcss autoprefixer

Then generate your tailwind.config.js and postcss.config.js files with the command below:



npx tailwindcss init -p

Step 3:

Configure Tailwind CSS

Add the paths to all of your template files in your tailwind.config.js file. You can do that by copying the template available in the config file on the docs. It's also provided below:



/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4

Add the Tailwind directives to your index.css file

To import Tailwind CSS into your project. Open the "src/index.css" file, which is the main CSS file for your React application. Remove all the existing code in the file and add the following import statement to include Tailwind CSS:



@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5

Run the Development Server

Now that Tailwind CSS is integrated into your React project, it's time to start the development server and see the changes in action.
Run your build process with npm run dev in the terminal.



npm run dev

This will start the development server, and you can access your React application in the local host server address provided in the terminal:

Styling components/elements with Tailwind CSS

If you are not a Tailwind expert yet, you can easily look up the class names for any CSS property you need on an element by searching for it on the docs.

Example

Let us style a h1 element and a paragraph element in the App.jsx file of our React application.

Create the h1 and p element



import React from 'react'

const App = () => {
  return (
    <div>
      <h1> Tailwind Setup </h1>
      <p>Styling jsx elements</p>
    </div>
  )
}

export default App

To give the h1 text a yellow color, you go on to Tailwind Docs

Go to the tailwind docs, you will see a search bar on the left side bar on the docs page, search for text color, on the results, click on text color and then go through the lists of colors made available to you to choose, I will go with text-red-600.

Copy the class name and apply it to the h1 element



<h1 className="text-red-600">Tailwind Setup</h1>

To make the paragraph underlined, search for underline on the docs,

Apply it to the paragraph element:



<p className='underline'>Styling jsx elements</p>

Note: Elements should be styled according to the design requirements of your project.

You now have a powerful combination of React's component-based architecture and Tailwind CSS's utility-first approach at your disposal. This combination allows you to create visually appealing and responsive web applications with speed and efficiency.

Happy coding!!!

Learn How to Build Responsive Navigation Bar with HTML, CSS, and JavaScript

David Bilson — Fri, 30 Jun 2023 11:19:04 +0000

A responsive navigation bar is essential for any web application, whether you are building static websites using the frontend trio (HTML, CSS, JS) or technologies such as React and Angular for single-page apps, it is crucial to know how to build a well-designed navigation bar.

This step-by-step tutorial will give you a clean walk-through, and a straightforward approach to building a responsive navigation bar that adapts to different screen sizes and provides a clean browsing experience for your users.

If you are a beginner, it is important to understand that when building with HTML, it is advisable to avoid using div containers excessively. Instead, you should adopt a semantic approach.

To ensure clarity, let's break down the entire tutorial into a series of steps.

Step 1 (HTML structure)

Create the complete HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar</title>
</head>
<body>

</body>
</html>

Remember, all the content of a web page is enclosed within the <body> element. Therefore, we will begin by nesting a <header> element within the <body> element. This <header> element will be the parent container for the <nav> element.

Step 2 (Create header and nav element)

Create a <header> element within the body and assign it a class name of "navigation-header". Next, nest a <nav> element within the <header>. Inside the <nav>, include two <div> containers.
The first div, with a class name of "logo-container", will contain the logo, while the second div, with a class name of "navigation-items" will contain the navigation items. Also, give the navigation items container an id of "navigation-items".

Nest <a></a> within the logo container, the content of the anchor tag can either be text or an image, depending on the requirement of your project.
Nest three <a></a> within the navigation items container. The text content of each anchor element will be based on the requirements of your project. For the sake of this tutorial, I will use "About", "Projects", and "Contact Me" as the text contents for each anchor element respectively.

Lastly, for the HTML part of this tutorial, you will nest another div container within the nav element. This container will host the hamburger icons that will be displayed on smaller screens. Give it a class name of "hamburger". Then, nest two spans within it. The first span should have an id of "openHam" with a hamburger HTML entity as its text content ☰. The second span should have an id of "closeHam" with a HTML entity ✖ as its text content.

Complete HTML Code Snippet

 <header class="navigation-header">
    <nav>
        <div class="logo-container">
            <a href="./index.html">Logo</a>
        </div>
        <div class="navigation-items" id="navigation-items">
            <a href="">About</a>
            <a href="">Projects</a>
            <a href="">Contact Me</a>
        </div>
        <div class="hamburger">
            <span id="openHam">&#9776;</span>
            <span id="closeHam">&#x2716;</span>
        </div>
    </nav>
   </header>

Step 3 (Styling with CSS)

Before proceeding to styling the HTML elements in the external CSS file, ensure the CSS file is attached to the HTML file within the head element using the tag.

<link rel="stylesheet" href="style.css">

It is a common practice in web development to apply a CSS reset or CSS normalization to ensure a consistent starting point for styling across different browsers. By resetting the padding, margin, and box-sizing properties of all elements, as well as the body element, you can avoid any inconsistencies or unexpected default styles that different browsers may apply.

- Create a consistent styling foundation

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

The CSS snippet above helps to create a more predictable layout and styling behavior across different browsers and devices.

Style the navigation header

Select the header element using its class name. Since it is the parent container for the <nav>, it is going to be the main background, and would have a definite height.
The navigation element within it should be centered on the x-axis and y-axis, therefore, flex properties come into play.

.navigation-header {
  background-color: rgb(73, 51, 153);
  padding: 0 15px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Style the nav

Since we are working with only one <nav> element, we do not need to give it a class name. Select the nav element using its element name.
If the project you are working requires a uniform width on all parent containers, then you are going to set the max-width of the nav to that required max-width of your project.

For the sake of this project, we are going to set the max-width to 1200px. To make the container stretch to the full max-width, apply 100% width. This way, the container stretches up to the max-width but won't exceed the maximum width making the container responsive in that process.
There are three child containers within the nav, they need to be on the same plain on the x-axis, therefore, we are going to make use of the flex properties to space out the containers and align them properly using the snippet below.

nav {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Style the logo

Select the anchor element within the logo container. Set its text color to ghostwhite. Remove any underlining or decoration from the text within the <a> element. Set the font-weight to bold (700 is the numeric value for bold font-weight). Set the font-size to 26 pixels.

.logo-container > a {
  color: ghostwhite;
  text-decoration: none;
  font-weight: 700;
  font-size: 26px;
}

Style the navigation items

Select the navigation items using its class name. Within the navigation items, we have three navigation links, make them align horizontally using the flex layout.

.navigation-items {
  display: flex;
  gap: 40px;
}

Style the navigation links

Select the links within the navigation items using the direction child selector. Set the text color to "ghostwhite", remove text decoration, apply a font weight of 500, and set the font size to 16 pixels. Also add a transition for smooth hover effect.

.navigation-items > a {
  color: ghostwhite;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: .4s ease-in-out;
}

Add hover effect to navigation links

Simply change the color of the navigation to white, or based on the requirement of your project.

.navigation-items > a:hover {
  color: white;
}

Style the hamburger

The hamburger has two child elements within it which includes the openHam and the closeHam icons. Here we used HTML entities for the icons, you can import icons from icon libraries such as font awesome, google fonts or iconicon library.
On desktop and laptop screens, we definitely do not want the hamburger icons to show, so we hide them by default, then make them show up on smaller screens using media queries. But we are going to add some other default styling to the hamburger.

.hamburger {
  display: none;
  font-size: 20px;
  font-weight: 800;
  color: white;
}

We are done with the desktop version of the entire navigation. Now, let's proceed to making it responsive and well designed for the smaller screens using media query.

Create a different style for hamburger, and the navigation items on smaller screens using CSS media query

Here, we are going to have a different style from tablet devices with screen sizes from 768px below, this would also cover for mobile screens.

@media screen and (max-width:768px) { }

Media query is commonly used for creating responsive designs that adapt to smaller screen sizes, such as tablets or smaller desktop screens.

In the above code snippet, the styles within the media query will only be applied when the screen width is 768 pixels or smaller.

Elements are reselected within the curly braces and are styled to fit properly to the current screen size as written in the media query which is 768px in this case.

The hamburger and the navigation items will be reselected and styled to fit properly for the 768px screens

@media screen and (max-width:768px) {
  .hamburger {
    display: flex;
    cursor: pointer;
  }
  .hamburger #closeHam {
    display: none;
  }
}

The closeHam icon is hidden and should only display when the navigation menu is displayed.

Style the navigation-items within the media query

.navigation-items {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 0;
    top: 58px;
    background-color: rgb(73, 51, 153);
    width: 100%;
    height: calc(100vh - 58px);
    padding-top: 60px;
    gap: 10vh;
  }

It is hidden by default using the display: none; property and should only show up when the openHam icon is clicked.
We are going to handle this event logic using JavaScript

Complete CSS Code

*, body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

/* Navigation */
.navigation-header {
  background-color: rgb(73, 51, 153);
  padding: 0 15px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo-container > a {
  color: ghostwhite;
  text-decoration: none;
  font-weight: 700;
  font-size: 26px;
}
.navigation-items {
  display: flex;
  gap: 40px;
}
.navigation-items > a {
  color: ghostwhite;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: .4s ease-in-out;
}
.navigation-items > a:hover {
  color: white;
}
.hamburger {
  display: none;
  font-size: 20px;
  font-weight: 800;
  color: white;
}
@media screen and (max-width:768px) {
  .hamburger {
    display: flex;
    cursor: pointer;
  }
  .hamburger #closeHam {
    display: none;
  }
  .navigation-items {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 0;
    top: 58px;
    background-color: rgb(73, 51, 153);
    width: 100%;
    height: calc(100vh - 58px);
    padding-top: 60px;
    gap: 10vh;
  }
}

Step 4 Click event logic with JavaScript

Variables for openHam, closeHam and navigationItems

Create openHam, closeHam, and navigationItems variables and assign to elements in the HTML document using their corresponding IDs.

let openHam = document.querySelector('#openHam');
let closeHam = document.querySelector('#closeHam');
let navigationItems = document.querySelector('#navigation-items');

Create a reusable function that controls visibility of elements.

const hamburgerEvent = (navigation, close, open) => {
    navigationItems.style.display = navigation;
    closeHam.style.display = close;
    openHam.style.display = open;
};

The code snippet defines a function called hamburgerEvent which takes three parameters: navigation, close, and open. Inside the function, it modifies the CSS display property of the navigationItems, closeHam, and openHam elements based on the provided values.

Using an event listener, attach a click event to openHam and closeHam icons, with the hamburgerEvent function as the second parameter of the event listener:

openHam.addEventListener('click', () => hamburgerEvent("flex", "block", "none"));
closeHam.addEventListener('click', () => hamburgerEvent("none", "none", "block"));

openHam.addEventListener('click', () => hamburgerEvent("flex", "block", "none")); sets up an event listener for the click event on the openHam icon.

When this element is clicked, it triggers an anonymous arrow function that calls the hamburgerEvent function with the arguments "flex", "block", and "none". This will change the display property of navigationItems to "flex", closeHam to "block", and openHam to "none", effectively showing the navigation items and switching the hamburger icon to the close icon.

The event listener attached to the closeHam does the exact opposite of this by passing "none", "none", "block" as the parameters of the hamburgerEvent function invoked in the event listener.

Complete JavaScript Code

let openHam = document.querySelector('#openHam');
let closeHam = document.querySelector('#closeHam');
let navigationItems = document.querySelector('#navigation-items');

const hamburgerEvent = (navigation, close, open) => {
    navigationItems.style.display = navigation;
    closeHam.style.display = close;
    openHam.style.display = open;
};

openHam.addEventListener('click', () => hamburgerEvent("flex", "block", "none"));
closeHam.addEventListener('click', () => hamburgerEvent("none", "none", "block"));

Step-by-Step Tutorial: How to Send Emails Directly from Your React Website

David Bilson — Tue, 25 Apr 2023 07:54:26 +0000

Are you looking to make it easy for clients or customers to contact you directly from your website? Adding a message-sending feature can do just that! In this easy-to-follow tutorial, I will show you how to integrate a messaging system into your website using EmailJS. With this feature, you'll have better control and easier communication with your users and visitors. Whether you're building a portfolio website or a business landing page, this tutorial is for you! Before we dive into the technical aspect of this guide, let me quickly introduce you to EmailJS.

What is EmailJS?

EmailJS is a powerful tool that can streamline communication between your website and your users or customers with client-side code using a simple API.
It supports various services such as Gmail, Outlook, and Yahoo to receive the messages sent from your website. With EmailJS, you can easily integrate email sending features into your website.

How to add a messaging feature to your React website using EmailJS

Step 1: Sign up for an account on EmailJS

To add a messaging feature to your React website using EmailJS, the first step is to sign up for an account on their website to be able to fully use their services. Click here to sign up.
When you are done signing up, click on the email services tab in the navigation menu, then click on 'Add new service'.

You are to select an email service you want to use to receive the messages sent from your website. This could be your personal email or company email. In this tutorial, I will be going with Gmail.

After you select an email service, a new tab will be shown to you where you will see Name and Service ID. You have the option to customize the name of the email service to fit your project. Copy your service ID and save it somewhere, I'd recommend Notepad for easy reach. You are also required to connect the email account you want to use for the project. Click on the connect button in blue and follow the due process that will be shown to you.
When you have successfully connected your email account, click on "Create Service". With Gmail, you can receive up to 500 messages from the website per day.

Step 2: Install EmailJS service package using NPM

After successfully creating an account on EmailJS official website, you need to install the service package in your React project. To install EmailJS via NPM, simply run the command below in your IDE terminal:



npm install @emailjs/browser --save

After the installation has been completed, you need to import emailjs library using ES6 module syntax from the '@emailjs/browser' module. Create a EmailForm component, and import the emailjs library using the code below ```

import emailjs from '@emailjs/browser';

You also need to **import emailJS CSS file** in the component using the code below...

import './EmailForm.css';

####Step 4: Create form UI using JSX

- 
The next thing we need to work on is the form UI that the user will interact with and send messages from. We will build the form UI using JSX. In case you are not so familiar with building forms in React, do not worry, it is similar to how we build forms with HTML. 
Below is a snippet of a form using JSX.

export const EmailForm = () => {
return (

Send Message

)}


- 
The code snippet above is a basic form that collects the user's email and also allows the user to write their messages directly within the `textarea`.
But it doesn't end there. We need to make the form functional.

We need to define a function in the component that will handle the form submission and send the message using the code below

In this code, the "sendEmail" function prevents the default form submission behavior using "e.preventDefault()". Then it uses the emailJs library to send the form data to the email address we attached earlier, which is defined by **service_ID**, **template_ID**, and **public_key** in the arguments of the "sendForm" function. The function also includes two console logs that will log the result and any errors that occur.

If you have copied your service_ID as instructed earlier, paste it where we have the service_ID in the sendForm function. You also need a template_ID which you can obtain from the dashboard on your emailJS account. 

![How to get template ID on EmailJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3w5ffsx15zc3ssv1xih.jpeg)

Click on the Email templates tab, go to settings, copy the entire template_ID. This is an example 'template_abcdfg'. Paste it where we have template_ID in the "sendForm" function.

To obtain the public key, on your dashboard, click on the Account tab, copy the public key and paste it where we have 'public-key' in the code.

![How to get public key or user ID on EmailJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z66rulb41htvibcm91wt.jpeg)

You need to define a ref for the form to submit it.

const form = useRef();

Finally, you can add an onSubmit handler to the form opening tag that will call the "sendEmail" function:

...

In this code, the "ref" attribute is used to create a reference to the form, which can be passed as an argument to the "sendForm" function. The "onSubmit" attribute is used to call the "sendEmail" function when the form is submitted.

**FULL CODE SNIPPET**

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';
import './EmailForm.css';

export const EmailForm = () => {
const form = useRef();
const sendEmail = (e) => {
e.preventDefault();

    emailjs.sendForm('service_ID', 'template_ID', form.current, 'public_key')
        .then((result) => {
            console.log(result.text);
            console.log("message sent!")
        }, (error) => {
            console.log(error.text);
            console.log("error sending message, try again!")
        });
    };

return (

Send Message

)};


Sending emails directly from a website is a useful feature. In this tutorial, we've explored how to do this using a library called EmailJS in a React app. By following the steps in this tutorial, you can easily send emails from your website without worrying about the complicated details. With EmailJS, sending emails is a breeze, and you can focus on building great applications without worrying about the complexities of email delivery.

How to Create Responsive Containers for Your Website: Step-by-Step Tutorial

David Bilson — Wed, 29 Mar 2023 13:15:07 +0000

Designing a website that looks great on all devices can be difficult, especially when it comes to creating responsive containers.

These containers are layout elements that adjust their size and position based on the device's screen size, ensuring that the website looks good on any device, from a large desktop to a small mobile phone.

However, writing CSS media queries to achieve this can be intimidating. Fortunately, with just a few CSS properties, you can easily make any container responsive, whether it contains text, images, or videos.

This tutorial will guide you through creating responsive containers for your website, allowing your content to look great on any device.

Whether you're a beginner or an experienced web developer, this tutorial will give you the necessary knowledge to design responsive web layouts that are visually appealing.

Single Containers

Let's take a look at how you can make a single container responsive, whether it contains text, an image, or a video.

Step 1: Create a container

No matter which technology you are using - pure HTML, React, Angular, or Vue - you will need a container element such as <div> or <section>.

This tutorial will focus on using the <div> container element. Create a div element with a class of 'container'.



<div class="container"></div>

Let's have some text within the container...



<div class="container">Write 50 - 100 words here</div>

Step 2: Styling the container and making it responsive

Select the container in your CSS file using its class name. Give it a background-color of your choice, and text color of your choice, and some padding if you wish to.

Responsiveness

By default, a div container like this would occupy 100% width of any screen, but let's say you want to give it a defined width, you'd want that container to automatically adjust to any screen size, right?

You can do that without writing media queries.
First, give it a width of 100%, then set max-width to the requirement of your project. Here, we will go with 700px...



.container {
width: 100%;
max-width: 700px;
}

You can center the container using margin: auto; if it is required in your project.
Using the developer tools in your browser, you can adjust the viewport of your screen to see the responsiveness of the container. Make sure to fine-tune the max-width to your project's requirement.

Why 'max-width'?

In responsive design, the max-width property is used to set the maximum width of an element on a webpage. This means that if the viewport or device width is less than the set max-width, the element will shrink to fit within the available space.

However, if the viewport width is larger than the max-width, the element will not stretch beyond the specified width.

If you only use max-width without width: 100%;, the container may only stretch to fit the content within it and not the full width of your requirement.

Therefore, you need to include width: 100%; to ensure that the container expands to fill the entire width of the screen while still adhering to the max-width limit you set.

Minimum height (min-height)

When creating containers with a fixed width, it may be necessary to specify a height for them in your project. However, if you're taking the desktop-first approach, setting a fixed height could cause the container's content to spill over on smaller devices.

In other words, if you set a fixed height for a container, it may not adjust well to smaller screens, and the content inside the container could overflow or become distorted.

Therefore, it's essential to keep in mind the responsiveness of your design and consider using the min-height property instead.

Suppose you have a container containing text with a set width and maximum width, and you want to give it a specific height of 200px. In that case, you should use the "min-height" property to set the height.

This property ensures that the container's height won't be smaller than the specified value, but it can expand beyond that height to accommodate the content inside it.

This way, you can keep your design consistent while allowing flexibility for different amounts of text or varying screen sizes.

Example



.container {
 width: 100%;
 max-width: 600px;
 min-height: 200px;
}

Flexbox display

Flexbox is a powerful layout mode in CSS for creating dynamic and responsive user interfaces. It allows developers to easily arrange, align, and distribute elements/containers on a web page.

Let's explore its fundamental concepts and how we can apply various flexbox properties to create a responsive layout.

When you have multiple containers on your page that you want to align side to side, you can make use of some flexbox properties in combination with the responsive width and height properties we talked about in the earlier part of this article.

As a case study, we will be working with a single-parent container and three-child containers...



<div class="parent-container">
  <div class="child-container">A</div>
  <div class="child-container">B</div>
  <div class="child-container">C</div>
</div>

Give the child container a defined width and height, following the earlier principles we talked about.
Also, apply a background-color of your choice so that we can differentiate them from the default background of the body of the page.



.child-container {
width: 100%;
max-width: 350px;
min-height: 300px;
background: dodgerblue;
}

This is what we currently have.
To make the child containers align side to side while maintaining responsiveness, you can make use of the following flexbox properties on the parent-container...



.parent-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

This is the result below:

What does each property in the parent-container do?

display: flex;: This property defines a flex container for the element, enabling flexible layout options for its children.

flex-wrap: wrap;: This property controls whether the flex items should wrap or not when they reach the end of the container. In this case, wrap means that items will wrap to a new line when they reach the end of the container.

gap: 20px;: This property sets the spacing between flex items. It is shorthand for the row-gap and column-gap properties, which are used to define the spacing between rows and columns respectively.

justify-content: center;: This property aligns the flex items along the main axis (horizontal axis in this case) and centers them within the flex container.

align-items: center;: This property aligns the flex items along the cross axis (vertical axis in this case) and centers them within the flex container.

Complete CSS Code

In conclusion, implementing these properties can simplify the process of creating responsive containers. Rather than writing neck-breaking media queries, you can leverage these properties to create flexible layouts that adapt to various screen sizes and devices.
If you are a beginner, you need to have it at the back of your mind that this tutorial only serves as a guideline to responsive web design. Always tweak the max-width and min-height of your containers to the requirement of your project.

Best React UI Libraries for Simplifying Frontend Development and How to Implement Them

David Bilson — Mon, 20 Mar 2023 00:40:46 +0000

Creating a visually appealing and intuitive user interface is key when it comes to developing modern websites. Developing UIs from scratch can be time-consuming and complex, you'll agree with me that React and its add-on libraries make life easier, right?
React UI libraries are pre-built and easily customizable UI components that easily fit your application's design and functionality requirements.
In this article, we will look at some of the top React UI libraries that can help simplify engineering on the front end and enhance your web app's user experience.
These libraries offer a range of components that helps save time and effort while delivering a highly decorous and professional user interface. Let's take a look at the libraries one after the other and how you can implement them in your project:

1. React Icons

Icons are an essential part of modern web design, providing users with visual cues and helping to make interfaces more intuitive and user-friendly. React icons provide a set of pre-built icons that can be easily customized and integrated into your project. Some of the popular icons you'll find in react icons include Ant Design icons, Bootstrap icons, Dev icons, Font Awesome 5, Material Design icons, and Game icons. It is not limited to those alone, there are several other icons that you can make use of in your project, but it is a good practice to maintain consistency for each project. Let us see how we can implement React icons in a React project.

Step 1: Installation

You need to install react-icons into your react app using the npm command below in your terminal:

npm install react-icons --save

Step 2: Importing the icons

You'll need to first import the specific icon component you want to use from react-icons library. You can't possibly know the name of all icons component off the top of your head, simply go to https://react-icons.github.io/react-icons/ and search for the specific icon you want to use. As a case study, we are going to use the warning icon component from Ant Design (ant design icons are usually the first set of results). On the website, search for 'warning', click on the icon once to copy it. Go to the specific component you want to add the icon to and import it using:

import {AiFillWarning} from 'react-icons/ai'

Note: the last two letters of the texts in quotes must match the first two letters of the icon component - in this case, it is ai...indicating Ant Design.

Step 3: Add the icon as a component

Let's add the icon within a single-word paragraph:

<p>Caution <AiFillWarning/> </p>

React-icons can be easily imported and used in your project. Read full documentation.

2. Toast notifications using React-toastify

Toast notifications help with real-time feedback on users' actions, improving the overall user experience. React-toastify provides an easily customizable solution for adding toast notifications to your project. The library provides components (functional and class-based) for displaying notifications. There is a wide range of configuration options for Toastify notifications. Let's take a look at how it works and how we can implement it in a react project:

Step 1: Installation

To use Toastify in your react project, you will need to add it by running the npm command below:

npm install --save react-toastify

Step 2: Import toastify notification

The two components that must be imported are **ToastContainer** and **toast**. Use the import statement to integrate these two components:

import {ToastContainer, toast} from 'react-toastify'

You also need to import the pre-built styles:

import 'react-toastify/dist/ReactToastify.css'

Step 3: Create toast render function

In your functional component, a function is needed to render the component when the user performs an action on the web page:

const notify = () => toast('Notification text here');

You can also render a component instead of a string...

const notify = () => toast(<NewComponent/>);

Using the onClick event on a button, let's render the notification by calling the notify function...

<button onClick={notify}>Notify Me!</button>
<ToastContainer/>

When the Notify Me button is clicked, the onClick event triggers the notify function which in turn renders the toast notification in the UI.
Note: you must also render the component for the toast notification to work.
There are configurations options that you can customize to fit into your project requirements; check out the full documentation here: Toastify Documentation

3. React Modal

React modal provides an easily customizable and accessible way to display content in a modal dialog. It is a simple and flexible solution that enables developers to create interactive UIs. React modal is highly configurable and can be easily integrated into any React application.
Let's delve into the implementation of modals using React modal:

Step 1: Installation

To use react modal in your react app, you will need to add it by running the npm command below in your terminal:

npm install react-modal

Step 2: Import the modal from React-modal library

After installation, you need to import the Modal component from the library into the component you are working on using the import statement:

import {Modal} from 'react-modal'

Step 3: Add to component

You need to render the Modal component in your project. The two configurations that must be added as props in the Modal component are isOpen and onRequestClose.

<Modal
isOpen
onRequestClose
>
Modal contents can be written here...
</Modal>

The modal need to be interactive well enough for smooth user experience. Using events and states, we can configure the modal to be interactive:
Above the modal component, let's add a button that will trigger a click event that would make the modal pop up.

<button onClick={}>Open Modal</button>

The button doesn't do anything yet, using the useState hook, we can alter the state of the modal:

const [modalOpen, setModalOpen] = useState(false);
//the initial state of the modal should be set to false to keep it closed by default

The click event needs a function that will alter the state of the pop up modal by rendering it to the user interface:

<button onClick={() => setModalOpen(true)}>Open Modal</button>

Add modalOpen as the value of the isOpen prop in the modal component...

<Modal
isOpen={modalOpen}
onRequestClose
>
Modal contents can be written here...
</Modal>

isOpen prop opens and closes the modal.
A close button has to be added to the modal component to enable the user to close the modal.

<Modal
isOpen={modalOpen}
onRequestClose
>
<button onClick={() => setModalOpen(false)}>Close Modal</button>

Modal contents can be written here...
</Modal>

To optimize the user experience to the max, the user needs to be able to close the modal when the overlay is clicked. The onRequestClose prop allows the user to close the modal:

<Modal
isOpen={modalOpen}
onRequestClose={() => setModalOpen(false)}
>
<button onClick={() => setModalOpen(false)}>Close Modal</button>

Modal contents can be written here...
</Modal>

Make sure to bind modal to your appElement root using:

Modal.setAppElement('#root');

For styling and additional configuration, refer to full documentation here: React Modal Documentation.

4. Tool Tip (tippy.js)

Tippyjs tool tip is a UI component that provides extra information about an element when users hover over an element. Tool tips are useful in creating interactive websites, providing users with relevant information without crowding the user interface.
Let us see how we can integrate react tool tip in a project.

Step 1: Installation

To integrate tippyjs, you need to first install the npm package in the project via the terminal...

npm i @tippyjs/react

Step 2: Import tippy component

After installation, import Tippy in the component you are working on, also import the ToolTip css file...

import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';

Step 3: Integrating to UI

To use the Tippy component in the UI, you will wrap the component around the element you are trying to pass additional info to. See example below:

<Tippy content="Say Hello">
<button>Greet</button>
</Tippy>

Tippy library provides a fast, easy and non-complex way to integrate tooltips in react.
See full documentation.

5. AOS (Animate On Scroll) Library

The AOS library, short for Animate on Scroll, is a powerful tool that helps to create captivating animations that trigger as users scroll through their website. In this guide, we'll explore how to use AOS to add dynamic visual effects to your website.

Step 1: Installation

Install the aos library using npm in the terminal...

npm install aos --save

Step 2: Import the library in your App component

It is recommended to import the library to the base component, this helps to avoid importing into different child components you are working - implementing the DRY principle.

import AOS from 'aos';
import 'aos/dist/aos.css';

Step 3: Initialize AOS in the App component using the `useEffect` hook. See example below:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    AOS.init();
  }, []);

  return (
    // Your component code
  );
}

Step 4: Add data-aos to any jsx element

There are more than 15 animation effects that can be used on elements. You have to apply the data-aos attribute to be able to apply any animation effect.

<div data-aos="fade-up">Animate me!</div>

Meanwhile, keep in mind that you have already initialized the library in the base component which is the App component, so you do not need to initialize it anywhere else.
See full AOS documentation. See all animation effects.

There are many other useful libraries that aren't discussed in this article, we will take a look at them in the sequel (part 2) of this article. I hope you found this article useful, let me know your thoughts in the comment section.

How to return multiple items in a map function in JavaScript

David Bilson — Sat, 04 Mar 2023 11:18:40 +0000

The map() function enables you to loop over every element in an array, modify it and then return a different element to replace the initial element. The map() function does not change the original array, you will still have the same amount of elements as the original array.

The map() method takes a function that accepts three arguments:

The first argument is the current value
Second argument is the index
The third argument is the original array

Let's take a deeper look into this with an example;

- Create an array...

let val = [1, 2, 3, 4];

- Using the map() function, iterate through every element in the array...

let newVal = val.map((v) => {
 return [v*v, v*v*v, v+1];
});

//log 'newVal' into console

console.log(newVal);

The map function will return a new array in the console.

Let us go through an array of programming languages;

let languages = ["Kotlin", "Java", "Rust", "React", "Node", "Python"];

Now we need to create a map function, inside this function, we need to have a return statement and whatever we return will become the content of the new array.

let languages = ["Kotlin", "Java", "Rust", "React", "Node", "Python"];

//log the variable to console to see the languages array

console.log(languages);

//now let's make use of the map function

let langLength  = languages.map(function(item, index, array) {
return 6;
});

//log langLength to console

console.log(langLength);

You will observe that the new array now has six 6s in it.

Let us put an index in the array and see what it returns...

let langLength = languages.map(function(item, index, array){
return index;
});

//log langLength to console

console.log(langLength);

You will see in your console that it outputs the index number of each item in the array.

- Now, pass in the third argument of the function to the return statement...

let langLength = languages.map(function(item, index, array){
return array;
})

//log langLength to console to see the output

console.log(langLength);

You can see in the console that each item in the array has now been listed.

A better approach to returning multiple items from an array is by using the `flatMap()` function...

const num = [2, 4, 6, 8];
const newNum = num.flatMap((v) => [v*v, v*v*v, v+1]);
console.log(JSON.stringify(newNum));

//You should have a result like this: [4,8,3,16,64,5,36,216,7,64,512,9]

The map() function in JavaScript returns a new array with the same number of elements as the original array. If you want to create a new array with a different number of elements, you may need to use a different function such as filter(), reduce(), or flatMap().

The flatMap() function is available as a built-in function on arrays in JavaScript. It works similarly to the map() function, but it also flattens the output into a single array. This means that if the function applied by flatMap() returns an array, the elements of that array are included in the final output array.

I hope you have found this article helpful. Please take a moment to share your feedback in the CS. Thank you for reading.

How to save a string to clipboard in JavaScript

David Bilson — Wed, 01 Mar 2023 17:00:39 +0000

There are a few methods that can be used to copy a string to clipboard in JavaScript. It is important to know how to save/copy a string to clipboard when building websites and web-based applications.

To simply save a string to clipboard, you have to ensure navigator - navigator.clipboard and navigator.clipboard.writeText are used correctly.

Clipboard.writeText() allows you to copy the string value directly to clipboard. We will see how this works shortly.

Let’s take for example;

You create a string and store it as a variable…

let stringText = “This is the text to be copied to clipboard”;

After creating the string and storing it as a variable, you have to create a function that lets you copy the string to clipboard.

let stringText = 'I am a text copied to clipboard';

function copyBtn() {

navigator.clipboard.writeText(stringText);

}

If the function copyBtn() is assigned to an onClick event in an html element, when clicked on, the value of the string will immediately be copied to clipboard.

Let’s create an example with a html button which would have a click event that would enable you copy the string to clipboard which you can then paste anywhere.

Remember to pass the copyBtn() function to the click event.

First create a text area in your HTML that you can paste the string to.

<textarea name='textarea' placeholder='paste your link here' cols='30' rows='5'></textarea>

Create a button below the textarea

<button onclick='copyBtn()'>Click here to copy text to clipboard</button>

Open the html file in your browser, then click on the button. The string stored in the stringText variable will be copied to clipboard, you can then paste it within the textarea.

Okay, now you are thinking "Can't I make everything happen within HTML?"... Of course you can. How? You can create a paragraph and store its textContent as variable. The copyBtn function can then fetch the variable and store the textContent of the paragraph in the clipBoard. Go ahead and give it a try.

Make sure your JavaScript file is linked to your HTML file unless you are writing JS in HTML then the JavaScript codes should go within the tag.</p> <p>I hope you found this article useful. You can check other articles I have written on JavaScript and some of the best practices. </p> <p>If there are other ways that a string can be copied to clipboard, kindly state them in the comment section.</p>