DEV Community: Olaleye Blessing

Implementing Optimistic UI in React.js/Next.js

Olaleye Blessing — Fri, 02 Aug 2024 09:02:11 +0000

A smooth and responsive user experience(UX) is important for any modern web application. Users expect quick interactions and immediate feedback after performing an action, even when data needs to be updated on a server. Any delay can lead to frustration from the user. This is where optimistic UI comes in.

Concept of Optimistic UI

Optimistic UI is a technique that prioritizes a positive UX. It updates the UI immediately after a user takes an action, even before the server gets the action. This creates an illusion of instant response, thereby making the application feel faster.

Facebook implements an optimistic UI when you like/unlike a post.

Without an optimistic UI update, this is what would happen when a user likes a post:

User action: The user clicks the like button and the browser sends a request.
Server request-response: The server receives the request, processes it, and returns a response.
UI update: Facebook handles the server response:
- If successful, the like button turns blue and the likes count for the post increases.
- If an error occurs, a toast notification may be displayed.

A user might get frustrated when the server request-response time takes too long.

However, with an optimistic UI, this is what happens:

User action: The user clicks the like button and the browser sends a request to the server.
Optimistic UI update: The button immediately turns blue and the likes count increases. These happen without waiting for a response from the server.
Server request-response: The server receives the request, processes it, and returns a response.
Handle response: Facebook handles the server response
- If the request is successful, the UI remains the same.
- If there is an error, the UI reverts to the previous state before the user likes the post. The like button turns grey and the likes count is reduced by 1.

With this optimistic UI, users won't feel frustrated even with a slow internet connection. This is because an optimistic UI creates an illusion of a fast response.

We will look at two ways to implement this optimistic UI in React.js/Next.js:

Traditional way using the useState hook.
Modern way using the useOptimistic hook

Getting Started

To code along, open your terminal and paste the command below to clone the repository:



git clone https://github.com/Olaleye-Blessing/react-nextjs-optimistic-ui.git

The repository contains:

A scaffolded Next.js project.
A function to fetch todos from the DB.
An NPM package, json-server, that simulates REST API.
A sleep function to imitate a delay in a network request.
A Todo component to render each to-do item.

Despite using Next.js in the repo and this article, the logic applies equally to plain React.js and other React.js frameworks.

The Traditional Way of Doing Optimistic UI with `useState`

We will start by creating the initial page and necessary components/interfaces:

The page that will house the todo creation form and lists.
The form component that’ll be used to create new todos.
The todos component that renders created todos.

Code comments with numbers will be referenced in the explanations.

Creating The Todos Component

The todos component will accept a todos prop. It will loop through the todos and render a <Todo /> component for each to-do item. Create a app/trad/_components/todos.tsx file and paste the following code:



// app/trad/_components/todos.tsx

import { ITodo } from "@/interfaces/todo";
import Todo from "./todo";

export default function Todos({ todos }: { todos: ITodo[] }) {
  // render todos
  return (
    <ul className="mt-4 flex flex-col items-start justify-start space-y-2">
      {todos.map((todo) => (
        <Todo key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

Creating The Todo Form

The todo form will render a form element that will be used to create a new to-do item. The form will accept no props initially. Create a app/trad/_components/form.tsx file and paste the following code:



// app/trad/_components/form.tsx

import { FormEventHandler } from "react";

interface IAddTodo {}

export default function AddTodo({}: IAddTodo) {
  const add: FormEventHandler<HTMLFormElement> = async (e) => {
    e.preventDefault();
  };

  // renders a form to create a to-do
  return (
    <form onSubmit={add} className="flex items-center justify-between">
      <input
        name="todo"
        placeholder="Create a new todo"
        className="w-full mr-4 block py-1 rounded-md text-black px-1"
        // prevent empty value from being submitted
        required
      />
      <button
        type="submit"
        className="bg-green-700 text-white font-bold px-4 py-1 rounded-md"
      >
        Add
      </button>
    </form>
  );
}

The above renders the form we will use to create a new todo. However, we only prevent the form from submitting.

Creating The Main Page

The page will house the <Todos /> and <Form /> components. We will fetch all our to-do items from the database when the page initially mounts. We will then preserve the fetched items in a todos state.

Our todos state will hold both the fetched to-do items and new(optimistic) to-do items. Create a app/trad/page.tsx and paste the following:



// app/trad/page.tsx

"use client";

import { useEffect, useState } from "react";
import { ITodo } from "@/interfaces/todo";
import { getTodos } from "@/lib/todo";
import Form from "./_components/form";
import Todos from "./_components/todos";

export default function Home() {
  const [todos, setTodos] = useState<ITodo[]>([]);

  useEffect(() => {
    (async () => {
      let _todos = await getTodos();

      setTodos(_todos);
    })();
  }, []);

  return (
    <div className="flex flex-col items-center">
      <header>
        <h1 className="font-extrabold text-6xl mb-4">Todos</h1>
      </header>

      <main>
        <Form />
        <Todos todos={todos} />
      </main>
    </div>
  );
}

Our initial layout looks like this after creating the initial components:

If you are coding along, run pnpm run start:dev to start your Next.js and json-server.

Adding Functionalities To Our Components

Next, we’ll create functions to add a new todo and update a todo. We will pass these functions to our form component; you’ll see their usefulness in a jiffy.

Page.tsx



// app/trad/page.tsx

// .... previous code

export default function Home() {
  const [todos, setTodos] = useState<ITodo[]>([]);

  const addNewTodo = (todo: ITodo) => {
    setTodos((prev) => [todo, ...prev]);
  };

  const updateTodo = (oldTodo: ITodo, newTodo: ITodo) => {
    setTodos((prev) =>
      prev.map((todo) => (todo.id === oldTodo.id ? newTodo : todo)),
    );
  };

  // previous useEffect

  return (
    <div className="flex flex-col items-center">
      {/* previous code */}
      <Form addNewTodo={addNewTodo} updateTodo={updateTodo} />
      {/* previous code */}
    </div>
  );
}

Next, we will create a createTodo function. This function sends a request to create a new to-do item to the backend. This function will later be used in our form. Create a app/trad/actions.ts file and paste the following code:



// app/trad/actions.ts
"use server";

import { ITodo } from "@/interfaces/todo";
import { sleep } from "@/lib/sleep";

export const createTodo = async (todo: Omit<ITodo, "id">) => {
  // imitate a delay in the network request
  await sleep(2000);

  try {
    // send the request
    const req = await fetch("<http://localhost:3004/todos>", {
      body: JSON.stringify(todo),
      method: "POST",
    });
    const newTodo: ITodo = await req.json();

    // return the newly created todo
    return newTodo;
  } catch (error) {
    throw error;
  }
};

The “use server” directive is a way to use server actions.

Now we will create our optimistic UI update in our form. Remember, to create our optimistic UI, we need to update the UI immediately after the user clicks the "add button". Only after then, do we send our request to the server.

Our form component will accept the addNewTodo and updateTodo we created in our page component. addNewTodo and updateTodo will be used to add and update a new optimistic to-do item, respectively.

Form.tsx



// app/trad/_components/form.tsx

// previous imports
import { createTodo } from "../actions";

// update our form Props
interface IAddTodo {
  addNewTodo: (todo: ITodo) => void;
  updateTodo: (oldTodo: ITodo, newTodo: ITodo) => void;
}

export default function AddTodo({ addNewTodo, updateTodo }: IAddTodo) {
  const add: FormEventHandler<HTMLFormElement> = async (e) => {
    e.preventDefault();
    // comment 1
    const form = e.currentTarget;
    // comment 2
    const body = new FormData(form).get("todo") as string;

    // comment 3
    const id = new Date().getTime();

    // comment 4
    const todo = {
      body,
      completed: false,
    };

    // comment 5
    const optimisticTodo = {
      ...todo,
      id,
    };

    // comment 6
    addNewTodo(optimisticTodo);

    try {
      // comment 7
      let dbTodo = await createTodo(todo);

      // comment 8
      updateTodo(optimisticTodo, dbTodo);

      // comment 9
      form.reset();
    } catch (error) {
      console.log("__ ERROR ___");
    }
  };

  return (
    <form onSubmit={add} className="flex items-center justify-between">
      // previous code...
    </form>
  );
}

A lot is going on in our updated add function:

Comment 1: We get our form from the form submit event. This is to be able to reference it when we need it later.
Comment 2: We get our todo body from the input field.
Comment 3: We create a unique ID for our new todo. This is very important to identify the new todo.
Comment 4: We create the todo object that will be sent to the server. Notice we are not passing an ID. It’s the duty of the server to create a new unique ID for new todos.
Comment 5: We created our optimistic todo and gave it the unique ID. This optimistic todo will be used when:
- we want to revert our action.
- stay in sync with the server response.
Comment 6: We perform our optimistic update. The UI gets updated immediately at this point.
Comment 7: We send our request to the server and save the new todo in a variable.
Comment 8: We need to stay in sync with the server. We update the optimistic todo with the server response. This in turn updates the todo ID to use the ID generated by the server. Assume a user decides to mark the new todo as done, our app will send a wrong ID(the optimistic ID) if we are not in sync with the server.
Comment 9: We empty our todo field. This is optional.

It took more than 2 seconds for the server to respond but our new todo showed up on the screen immediately after we added it.

You might be wondering what happens if an error occurs.

Rollback UI Optimistic Update

We do what Facebook does; we roll back our optimistic UI update.

First, in our Page.tsx, create a function removeTodo, that removes a todo from the current todos. This function will do our rollback in the Form component.



// app/trad/page.tsx

"use client";

// previous code

export default function Home() {
  // previous code

  const removeTodo = (todo: ITodo) => {
    setTodos((prev) => prev.filter((t) => t.id !== todo.id));
  };

  // previous code

  return (
    <div className="flex flex-col items-center">
      <header>
        <h1 className="font-extrabold text-6xl mb-4">Todos</h1>
      </header>

      <main>
        <Form
          addNewTodo={addNewTodo}
          updateTodo={updateTodo}
          // new code
          removeTodo={removeTodo}
        />
        <Todos todos={todos} />
      </main>
    </div>
  );
}

Next, update our createTodo function to throw an error.

actions.ts



// app/trad/actions.ts

// previous code

export const createTodo = async (todo: Omit<ITodo, "id">) => {
  await sleep(2000);

  try {
    throw new Error("Testing...");

    // rest of code
  } catch (error) {
    throw error;
  }
};

Back in our form, we currently log the error to the console. We need to update it to rollback our UI to the previous state. We will update our <Form /> components to accept a removeTodo prop. This prop will be used to remove the optimistic todo from the todos, which in turn roll back our UI.

Form.tsx



// app/trad/_components/form.tsx
// previous code

export default function AddTodo({
  addNewTodo,
  updateTodo,
  removeTodo,
}: IAddTodo) {
  const add: FormEventHandler<HTMLFormElement> = async (e) => {
    // previous code

    try {
      // previous code
    } catch (error) {
      // rollback our UI
      removeTodo(optimisticTodo);
    }
  };

  return {
    /* previous code */
  };
}

As usual, we optimistically added the new todo. We then roll back the update since the server responds with an error.

The complete code for the traditional way can be found in the traditional branch.

useOptimistic: Modern way of creating optimistic UI

The useOptimistic hook offers a more concise way to create optimistic updates. Just like the traditional way, useOptimistic lets you show an optimistic state while an async function is processing.

This hook is only available in React’s Canary. This means it is officially supported but yet to be released.

Syntax of useOptimistic

The syntax of the useOptimistic hook looks like:



const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

The useOptimistic hook accepts 2 arguments:

state: This is the current state before a user performs any action. In our case, the state is the todos we get from the DB.
updateFn: This returns the optimistic update. It takes two arguments, current state and optimistic value. It then returns the optimistic state. In our case, we use this function to return the optimistic todos.

The useOptimistic hook returns an array of 2 items:

optimisticState: This is either:
- the state when the component mounts.
- or the state when the async function is processing.
addOptimistic: This is the function we call to dispatch the optimistic update.

Usage of useOptimistic

Let’s rewrite our traditional way using useOptimistic. We will start by creating our initial components:

Page: To house todos.
Todos: To house our form and lists.
Form: To create a new todo.
Lists: To render a list of todos.

Creating The Main Page

We will use a server component to fetch our to-do items from the database. This helps us to revalidate this page(more on this later). Unlike the traditional way, our page won’t hold a todos state as it is not needed. Create a app/modern/page.tsx file and paste the following code:



// app/modern/page.tsx

import { getTodos } from "@/lib/todo";
import Todos from "./_components/todos";

export default async function Page() {
  // We fetch all todos from the database
  const todos = await getTodos();

  return (
    <div className="flex flex-col items-center">
      <header>
        <h1 className="font-extrabold text-6xl mb-4">useOptimistic Todos</h1>
      </header>
      <main>
        <Todos todos={todos} />
      </main>
    </div>
  );
}

We first fetched our todos from the database. We then used the <Todos /> to render them.

Creating The Todos Component

Our <Todos /> component will house both our <Form /> component and list of to-do items. It will accept a todos prop. We will pass this prop to the useOptimistic hook as the initial state. Create a app/modern/_components/Todos.tsx file and paste the following:



// app/modern/_components/Todos.tsx

"use client";

import { ITodo } from "@/interfaces/todo";
import Todo from "./todo";
import { useOptimistic } from "react";
import Form from "./form";

export default function Todos({ todos }: { todos: ITodo[] }) {
  // Comment 1
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (_todos: ITodo[], newTodo: ITodo) => {
      return [..._todos, newTodo];
    },
  );

  return (
    <>
      {/* Comment 2 */}
      <Form addOptimisticTodo={addOptimisticTodo} />
      <ul className="mt-4 flex flex-col items-start justify-start space-y-2">
        {/* Comment 3 */}
        {optimisticTodos.map((todo) => (
          <Todo key={todo.id} todo={todo} />
        ))}
      </ul>
    </>
  );
}

Comment 1: We pass the current todos to the useOptimistic hook. Remember, the updateFn(second argument) always returns what the state should look like during an update.
Comment 2: We pass the return function to our form. This will be used later in the form component.
Comment 3: We render our to-do lists.

Creating The Form Component

Our <Form /> component will accept an addOptimisticTodo prop. This prop will optimistically add a new to-do item to our current to-do lists. Create a app/modern/_components/Form.tsx file and paste the following:



// app/modern/_components/Form.tsx

import { useRef } from "react";
import { createTodo } from "../actions";
import { ITodo } from "@/interfaces/todo";

interface AddTodoProps {
  addOptimisticTodo: (todo: ITodo) => void;
}

export default function Form({ addOptimisticTodo }: AddTodoProps) {
  const formRef = useRef<HTMLFormElement>(null);

  const addTodo = async (data: FormData) => {
    // Comment 1
    const todo = {
      body: data.get("todo") as string,
      completed: false,
    };

    // Comment 2
    addOptimisticTodo(todo);

    try {
      // Comment 3
      await createTodo(todo);

      formRef.current?.reset();
    } catch (error) {
      // Show a toast notification
      console.log("error");
    }
  };

  return (
    <form
      ref={formRef}
      className="flex items-center justify-between"
      action={addTodo}
    >
      // previous code...
    </form>
  );
}

Comment 1: We create our todo body. Notice we didn’t have to keep track of this new todo by creating a unique ID. This is because the useOptimistic hook does this out of the box.
Comment 2: We dispatch our optimistic function to update the UI.
Comment 3: We send our request to the server to create a new todo. This function hasn’t been created yet, we will do so in a jiffy.

Our page looks like this:

Adding Functionalities

Just like the traditional way, we will create a createTodo function that sends a request to the backend. We will then revalidate our page after adding a new to-do item. We will make use of the revalidatePath function provided by Next.js.

actions.ts



// app/modern/actions.ts

"use server";

import { ITodo } from "@/interfaces/todo";
import { sleep } from "@/lib/sleep";
import { revalidatePath } from "next/cache";

export const createTodo = async (todo: ITodo) => {
  // imitate a network delay
  await sleep(2_000);

  try {
    // throw new Error('Testing optimistic'); // un-comment this line to test rollback

    // send a request to create a new todo
    const req = await fetch("<http://localhost:3004/todos>", {
      body: JSON.stringify(todo),
      method: "POST",
    });

    await req.json();

    revalidatePath("/modern");
  } catch (error) {
    throw error;
  }
};

The revalidatePath function helps to refresh the data on a page. The parameter we provide to revalidatePath is the page path. So we refresh our data after a successful response. Without this revalidation, the optimistic todo disappears from the UI when the request is done.

Just like the traditional way, we updated the UI immediately after the user clicked the add button.

The complete code for the modern way can be found in the modern branch.

Benefits and Considerations when using useOptimistic

useOptimistic simplifies the code compared to manual state management. In our simple example, we had to do all these manually:

Keep track of the optimistic todo(by generating a unique ID).
Update the optimistic todo ID after a successful response.
Revert to the previous state in an error case.

useOptimistic does most of these explicitly, although we had to revalidate our page to keep the UI up-to-date. With less code, it will be easier to maintain our code in the future.

While useOptimistic is great, it is only available in React’s Canary and experimental channel. This means useOptimistic is only available in certain React frameworks(like Next.js). It might also have breaking changes in the future.

Essential Tips on Optimistic UI

Handle errors: Always handle errors from the server and roll back optimistic updates if necessary. Failure to handle server errors will mislead users.
Only use when necessary: Do not use optimistic updates for all user actions. Actions like user authentication shouldn't be updated optimistically until server confirmation is received.
Higher Certainty: Only use optimistic updates when there is a 99% chance of the action being successful.
Maintain a similar state between UI and server: This is necessary especially when the user performs a create action. For example, in our examples, there will be an error if a user creates a todo and tries to delete it immediately before the server sends the response for the create action. This is because the optimistic todo ID is unknown to the server. One way to prevent this is to disable the todo pending the time the server returns a response.

Conclusion

Effectively implementing optimistic UI can make your React.js/Next.js applications feel faster and more responsive.

True Lies Of Optimistic User Interfaces

Mastering Pattern-Matching in Elixir

Olaleye Blessing — Mon, 08 Jan 2024 21:27:54 +0000

Elixir is a functional programming language that is great for building scalable applications. Pattern matching is a powerful feature in Elixir. At its core, pattern matching allows developers to destructure data and make decisions based on its structure. You can use pattern matching in many ways. It's not just for one thing; it's all over the language, making it a big and important part of Elixir programming.

Prerequisite

To understand this article, you should have a basic knowledge of Elixir syntax.

Basics of Pattern-Matching

For any Elixir developer, it's essential to understand the way pattern matching works. It's like the language's secret handshake for working with data powerfully and intuitively.

Let’s look at an example of how pattern-matching works:

iex(1)> user = {"Blessing", "bb@gmail.com", "Male"}

If you're used to languages like JavaScript or Python, you might think this is an assignment, but it's not. Here in Elixir, we're matching the variable user with the data on the right side. In pattern matching, the left side is like a template, and the right side is the actual data. If the matching works, the variable gets bound to the Elixir data. If not, it throws an error.

Take for example,

iex(1)> 2 = 1

You’d get an error because the Elixir expression, 2 doesn’t match the pattern on the right, 1

(MatchError) no match of right hand side value: 1

Going forward, we will look at how to pattern match in:

tuples
lists
maps
structs
functions
case
with

Tuples

From our first example in this article, we can pattern-match the tuple and create 3 variables that are bound to the elements of the tuple:

iex(1)> {name, email, gender} = {"Blessing", "bb@gmail.com", "Male"}
{"Blessing", "bb@gmail.com", "Male"}

When the right expression is evaluated, the variables name, email, and gender are bound to the elements of the tuple.

iex(1)> name
"Blessing"
iex(2)> email
"bb@gmail.com"
iex(3)> gender
"Male"

This example works because we are matching a tuple that has exactly three elements. What happens if we increase/decrease the number of variables?

iex> {name, email, gender, unknown} = {"Blessing", "bb@gmail.com", "Male"}
** (MatchError) no match of right hand side value: {"Blessing", "bb@gmail.com", "Male"}

The match failed because the left-hand side is expecting a tuple of 4 elements but our Elixir expression only returns a tuple of 3 elements. An error will occur as long as the number of tuple elements on the left-hand side doesn’t match the right-hand side.

It is important to know that you can use underscore(_) to ignore values you are not interested in.

iex(1)> {name, _, _} = {"Blessing", "bb@gmail.com", "Male"}
{"Blessing", "bb@gmail.com", "Male"}
iex(2)> name
"Blessing"

Lists

Pattern matching with lists also works the same way it works with tuples. Take an example:

iex(1)> [a, b, c, d] = [1, 2, 3, 4]

After the list expression is evaluated, the variables will be bound to the list elements.

We can go further by grabbing the first two values and saving the remaining as a list in another variable.

iex(1)> [a, b | others ] = [1, 2, 3, 4]
[1, 2, 3, 4]
iex(2)> a
1
iex(3)> b
2
iex(4)> others
[3, 4]

Just as tuple, an error will be thrown when we try to pattern match lists with different lengths.

iex(1)> [a, b, c, d, e] = [1, 2, 3, 4]
** (MatchError) no match of right hand side value: [1, 2, 3, 4]

An error is also thrown when we try to pattern match an empty list using the cons operator(|):

iex(1)> [a | others] = []
** (MatchError) no match of right hand side value: []

This is because we don’t have enough elements on the right-hand side.

Maps

Pattern matching with maps is also quite straightforward:

iex(1)> %{name: name, email: email, gender: gender} = %{name: "Blessing", email: "bb@gmail.com", gender: "Male"}
%{name: "Blessing", email: "bb@gmail.com", gender: "Male"}

Just like in the previous sections, the variables name, email, and gender will be bound to the map keys. Unlike tuples and lists, the keys on the left side can take any order. The below also produces the same value as the above:

iex(1)> %{email: email, gender: gender, name: name} = %{name: "Blessing", email: "bb@gmail.com", gender: "Male"}
%{name: "Blessing", email: "bb@gmail.com", gender: "Male"}

We can also decide to match the value of a key without specifying other keys.

iex(1)> %{email: email} = %{name: "Blessing", email: "bb@gmail.com", gender: "Male"}
%{name: "Blessing", email: "bb@gmail.com", gender: "Male"}
iex(2)> email
"bb@gmail.com"

An error occurs if the expression doesn’t contain a key you are trying to pattern match:

iex(1)> %{name: name} = %{email: "bb@gmail.com", gender: "Male"}
** (MatchError) no match of right hand side value: %{email: "bb@gmail.com", gender: "Male"}

Structs

Think of a struct as a specialized map with explicitly defined fields. Structs offer a way to organize and manage data with a predetermined structure. They are similar to maps, they are built on top of maps. Consider a Person struct that looks like this:

iex(1)> defmodule Person do
...(1)>   defstruct [:name, :email, :gender]
...(1)> end

When you pattern match a struct, it provides a basic security check. This ensures that you're only matching against the struct you've defined beforehand. Because a struct is an extension of a map, we can pattern-match a struct using a map pattern.

iex(1)> p_1 = %Person{name: "Blessing", email: "bb@gmail.com", gender: "Male"}
%Person{name: "Blessing", email: "bb@gmail.com", gender: "Male"}
iex(2)> %{name: name} = p_1
%Person{name: "Blessing", email: "bb@gmail.com", gender: "Male"}
iex(3)> name
"Blessing"

As you can see, the above didn’t throw an error even tho our pattern was a pure map. Depending on the use case of our application, the above might lead to some bugs. It’ll be better if our pattern is the struct we are expecting:

iex(1)> %Person{name: name} = p_1
....
iex(2)> name
"Blessing"

With this, we are sure that our name variable is coming from a Person struct.

Just like map, an error will also be thrown if we try to pattern-match a key that doesn’t exist.

Functions

Pattern matching in functions helps us to execute a function based on their argument. Let’s look at a simple example:

iex(1)> test = fn
...(1)>   "Blessing" -> "My developer"
...(1)>   "Bikky" -> "Nurse"
...(1)>   _ -> "Unknown"
...(1)> end

In the above example, different results will be returned based on the argument passed to the function. The last pattern, underscore(_) will match any other value apart from "Blessing" and "Bikky".

iex(1)> test.("Blessing")
"My developer"
iex(2)> test.("Bikky")
"Nurse"
iex(3)> test.("Olaleye")
"Unknown"

Pattern matching in functions also comes in handy when dealing with structs:

iex(1)> test = fn
...(1)>   %Person{} -> "known"
...(1)>   %{} -> "maybe"
...(1)>   _ -> "unknown"
...(1)> end

The above is basically saying if the argument:

is created from our Person struct, the return “known”. e.g our p_1 variable from the structs section
is created from a plain map, then return “maybe”. e.g %{alive: true}
is any other thing, then return "unknown. e.g 2, true or :thief

Case macro

Pattern matching in case macro looks like this:

iex(1)> case expression do
...(1)>   pattern_1 -> do_something()
...(1)>   pattern_2 -> do_something_else()
...(1)>   pattern_3 -> other_thing()
...(1)>   _ -> always_match()
...(1)> end

The expression gets evaluated to a valid Elixir value. The result is then pattern-matched against each of our patterns. The function of the first pattern that matches gets evaluated.

The last pattern(underscore) is called a catch-all. If none of the first 3 patterns matches, then the last pattern gets evaluated. Without it, an error is raised if none of the first 3 patterns matches.

With/1

The with/1 special form lets you chain multiple expressions together. Pattern-matching in with/1 works almost the same way as others. The expressions provided to with/1 continue to execute as far as the patterns are matched:

iex(1)> with {:ok, name} <- expression_1(),
...(1)>      {:ok, email} <- expression_2(),
...(1)>      {:ok, age} <- expression_3() do
...(1)>  IO.inspect({name, email, age})
...(1)> end

Unlike others, with/1 won’t raise an error if a pattern is not matched. It will rather stop executing. For example, if expression_2() returns {:error, "no email"}, with/1 will stop execution and expression_3() will never run.

It’s common to provide an else block to handle error situations. Also, you can pattern-match the errors:

iex(1)> with {:ok, name} <- expression_1(),
...(1)>      {:ok, email} <- expression_2(),
...(1)>      {:ok, age} <- expression_3() do
...(1)>   IO.inspect({name, email, age})
...(1)> else
...(1)>   {:error, "no_email"} -> IO.inspect("No email")
...(1)>   _ -> IO.inspect("Unknown issue")
...(1)> end

Benefits of Pattern-matching

There are so many benefits to pattern-matching but we will be looking at a few:

Code Readability

Pattern matching enhances code readability by matching patterns within data or control flow. Take for example, our case/2 section:

iex(1)> case expression do
...(1)>   pattern_1 -> do_something()
...(1)>   pattern_2 -> do_something_else()
...(1)>   pattern_3 -> other_thing()
...(1)>   _ -> always_match()
...(1)> end

It’s clear what is happening when we have a particular result. It would be quite verbose if we had used nested ifs.

Destructuring

Pattern matching is the cleanest way to extract values from data structure and assign them to variables. It is even more useful when extracting values from nested data structures.

iex(1)> [%{name: name} | others] = [%{name: "Blessing", age: 12, alive: true}, %{name: "Olaleye", age: 98, alive: false}]
[%{name: "Blessing", age: 12, alive: true}, %{name: "Olaleye", age: 98, alive: false}]
iex(2)> name
"Blessing"

In the above, we extracted the name of the first person in the list.

Error Handling

Pattern matching can be used effectively for error handling. We can define specific patterns for different error scenarios and handle them differently. An example is what we did in our with/1 section:

iex(1)> with ...,
...(1)>      ...,
...(1)>      ... do
...(1)>   ...
...(1)> else
...(1)>   {:error, "no_email"} -> IO.inspect("No email")
...(1)>   _ -> IO.inspect("Unknown issue")
...(1)> end

Practical Examples

Recursion

Pattern matching proves invaluable when implementing recursive functions. Let's explore a factorial function example in Elixir.

defmodule MathOperations do
  def factorial(0), do: 1

  def factorial(n), do: n * factorial(n - 1)
end

Pattern matching shines when we set the base case to stop the recursion, like when the value hits 0. In the following example, factorial/1 uses pattern matching with two clauses. The initial clause matches when the argument is 0. This serves as the stopping point for the recursion. The second clause matches as far as the argument is not 0.

Authentication

Let’s look at a real example from one of my projects:

1...def login(conn) do
2...  %{body_params: body_params} = conn

3...  login_params = %{
4...    email: Map.get(body_params, "email"),
5...    password: Map.get(body_params, "password")
6...  }

7...  with {:ok, _} <- validate_login_params(login_params),
8...       {:ok, user} <- Accounts.login(login_params) do
9...    authenticate_user(conn, user)
10..  else
11..    {:error, msg} -> Router.json_resp(:error, conn, msg, 401)
12..  end
13..end

14..defp validate_login_params(%{email: nil, password: nil}), do: {:error, "Please provide email and password"}
15..defp validate_login_params(%{email: nil, password: _}), do: {:error, "Please provide email"}
16..defp validate_login_params(%{email: "", password: _}), do: {:error, "Please provide email"}
17..defp validate_login_params(%{email: _, password: nil}), do: {:error, "Please provide password"}
18..defp validate_login_params(%{email: _, password: ""}), do: {:error, "Please provide password"}
19..defp validate_login_params(_params), do: {:ok, true}

In the above code,

We first collect the credentials of a user (lines 2 to 6).
Next, we apply validate_login_params/1 to match various credential scenarios. This function uses pattern matching to handle cases like missing or empty email/password. It returns a tuple indicating success or an error message if validation fails.
We then pattern-match the result of validate_login_params/1 in the with construct (lines 7 to 12). If the validation succeeds ({:ok, *}),* we proceed to attempt user login using Accounts.login/1. If Accounts.login/1 also returns {:ok, }, we call the authenticate_user/2 function.
In case of validation failure from any of validate_login_params/1 or Accounts.login/1, we pattern match the error in the else clause.

This authentication example demonstrates how pattern matching is used to handle different scenarios in user login validation, making the code clear and concise.

Conclusion

Pattern matching is a powerful tool for writing clean, concise, and efficient code. By mastering pattern matching, you'll unlock the full potential of Elixir and write effective programs with ease.

The CSS Cascade, Inheritance, and Specificity

Olaleye Blessing — Thu, 17 Aug 2023 10:16:19 +0000

As a beginner diving into the world of web development, one of the fundamental technologies you'll encounter is Cascading Style Sheets (CSS). CSS is the magic behind the beautiful and responsive designs that make websites visually appealing. To become a proficient web developer, it's crucial to understand three key concepts: the CSS cascade, inheritance, and specificity.

The CSS Cascade

The CSS cascade is the process by which the browser determines which CSS rule will be applied to an element. The cascade works by assigning a weight to each CSS rule and then comparing the weight of each rule to determine which rule should be applied.

These CSS rules can come from various sources which include:

User Agent Stylesheets: These are the default styles applied by web browsers to HTML elements. Different browsers apply different styles depending on the element. For example, each browser styles a range input elements differently.
```
<input id="name" type="range" />
```
Author Stylesheets: These are the styles you, the developer, write in your CSS file(s). You define the colors, spacing, and so on. This allows your websites to have consistent design/views across all browsers.
User Stylesheets: These are the styles users apply to websites, which overrides the author's styles. However, this is uncommon among regular web users. Some frontend developers apply these stylesheets either during or after development to see what results could have been achieved.
Inline Styles: These are styles applied using the style attribute. Inline styles take precedence over external stylesheets.
```
<input id="name" type="range" style="display: none" />
```

The weight of CSS rules is determined by the following factors:

Importance: CSS provides the !important keyword to mark certain rules as more important than others. However, it is recommended not to use the !important keyword as it makes managing your styles more difficult. For example, the heading below will have a red color.
```
h1 {
    color: red !important;
}

h1 {
    color: green;
}
```
Specificity: Specificity is the algorithm CSS use to determine which rule/property should be applied to an element. More specific selectors take precedence over less specific ones. In short, the more specific a CSS rule is, the higher its weight will be. We'll delve deeper into specificity later.
Source order: If two CSS rules have the same importance and specificity, the rule that appears later in the CSS file will be applied. For example, the previous heading will have a green color cause it comes later in the source order.
```
h1 {
    color: red;
}

h1 {
    color: green;
}
```

Inheritance

Inheritance is a process that allows certain CSS properties to be automatically passed down from a parent element to its child element(s). Think of inheritance as a family tree, where grandparents pass some traits to parents, and parents pass some traits to children.

However, not all traits from parents are passed to their children. Similarly, not all properties are passed down from parent to child elements. Text properties like color, font, line-height, opacity are inheritable, while other properties like borders, padding, margin are not inheritable.

Here is an example that demonstrates how inheritance works:

<body>
    <h1>Inheritance</h1>
</body>

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: coral;
    font-family: 'Courier New', Courier, monospace;
    border: 1px solid green;
}

In the above example, notice that the h1 inherits the color and font-family properties from its parent, body, but it doesn’t inherit other properties. Specifying the same font-family on the h1 isn’t necessary due to inheritance. Knowing which properties inherit and which don't can save you from unnecessary duplication of style declarations.

h1 {
    font-family: 'Courier New', Courier, monospace; // not necessary
}

While some properties are inherited by default, you can use the inherit keyword to explicitly inherit any parent property. From the previous example, if we want the <h1> to inherit the parent's border, we can do so like this:

h1 {
    border: inherit;
}

Specificity

Specificity is a method used to determine which CSS rule should be applied to an element in situations where conflicting rules exist. It involves assigning a weight to different CSS rules to determine which one is the most specific and therefore takes precedence.

Specificity is calculated using various selectors, which are organized in order of decreasing specificity:

id selector: Styling by id is more specific than any other selector. Think of id as the king of a village. You can only have a king in a village, which means you can only have a unique id.
```
#myId {
    color: red;
}
```
class selector: This selector includes classes like .myClass, attributes like [type="search"], and pseudo-classes like :hover. No matter the number of class selectors combined, they will never override an id selector. Think of them as the queens within a village.
```
.myClass {
    color: brown;
}
```
Type selector: This selector includes HTML tags like div, table, section and pseudo-elements like ::before and ::placeholder. Think of them as the heirs of a village.
```
section {
    color: yellow;
}
```
Universal selector: This selector matches all elements of any type. It is denoted by *. It does not impact the specificity value in any way.
```
* {
    color: coral
}
```
In the absence of all selectors, all elements on a page will have a coral color. The universal selector is commonly used to reset the padding, margin and box-sizing of all elements on a page.
```
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
```

Combining Selectors and Calculating Specificity

You might be wondering, what happens when these selectors are combined? When selectors are combined, their specificity values are also combined. Specificity is usually represented as a three-component value: [a, b, c]. These components represent the specificity of ID selectors, class selectors, and type selectors, respectively.

For example, let's say we have the following selectors on this element:

<section id="myId" class="myClass anotherClass">
    Hello
</section>

#myId.myClass {
    color: purple;
}

section#myId.myClass {
    color: orange;
}

#myId.myClass.anotherClass {
    color: orange;
}

section#myId.myClass.anotherClass {
    color: brown;
}

section.myClass.anotherClass {
    color: orange;
}

section {
    color: blue;
}

In this scenario, each specificity here is:

myId.myClass: [1, 1, 0]
section#myId.myClass: [1, 1, 1]
#myId.myClass.anotherClass: [1, 2, 0]
section#myId.myClass.anotherClass: [1, 2, 1]
section.myClass.anotherClass: [0, 2, 1]
section: [0, 0, 1]

We will follow the following process to determine which specificity prevails:

First, eliminate any of the specificity without an id. This leaves us with myId.myClass, section#myId.myClass, #myId.myClass.anotherClass and section#myId.myClass.anotherClass.
Then, pick the ones with the highest number of class selectors. This leaves us with #myId.myClass.anotherClass and section#myId.myClass.anotherClass. Notice that even though section#myId.myClass has another selector, we discarded it because a class selector is always greater than type selector no matter the number of type selectors.
Lastly, pick the one with the highest number of type selectors. This leave us with section#myId.myClass.anotherClass which means that section will have a brown color.

Combining the three: The CSS Cascade, Inheritance and Specificity

To combine these three concepts, consider the following example:

<section id="parent">
    <header class="child">
        <h1 class="grandchild">Hello, World!</h1>
    </div>
</div>

#parent {
    background-color: red;
}

.child {
    background-color: blue;
}

.grandchild {
    color: white;
}

The CSS rules above will apply a red background color to the parent section, a blue background color to the child header, and a white color to the text of the grandchild h1.

If you change the color of the grandchild to black, it will override the parent and child rules because it has a higher specificity. Similarly, if you change the background color of the child to green, it will override the parent rule because it has the same specificity but comes later in the cascade.

#parent {
    background-color: red;
}

.child {
    background-color: blue;
}

.grandchild {
    color: white;
}

.child {
    background-color: green;
}

Finally, if you add an !important keyword to the child's background color, it will override all other rules regardless of their specificity or position in the cascade.

#parent {
    background-color: red;
}

.child {
    background-color: blue;
}

.grandchild {
    color: white;
}

.child {
    background-color: green;
}

header {
    background-color: aqua !important;
}

It's important to keep these concepts in mind when writing CSS to ensure that your styles are applied as intended and that you can easily manage and maintain your codebase.

Conclusion

To summarize, understanding the CSS cascade, inheritance, and specificity is crucial to becoming a proficient web developer.

The cascade determines which CSS rule will be applied to an element.
Inheritance allows certain CSS properties to be passed down from a parent element to its child element(s).
Specificity determines which CSS rule should be applied to an element in situations where conflicting rules exist.
!important should be a last resort.
Avoid combining multiple selectors. e.g section#myId.myClass.anotherClass
Avoid id selector, instead use other selectors like class.

By mastering these concepts, you can write efficient and maintainable CSS code for your web projects.

Helpful links:

Build a Weather App with React.js, TypeScript, and Tailwind CSS

Olaleye Blessing — Fri, 28 Jul 2023 10:58:06 +0000

One of the most effective ways to enhance your coding skills is to work on practical projects that challenge you and allow you to apply your knowledge in real-world scenarios.

In this tutorial, we will create a Weather App using React.js, TypeScript, and Tailwind Css. The purpose of this app is to provide users with up-to-date weather information for their desired locations. You can play with the live demo to see what we want to build and you can also look into the source code.

Prerequisites

This tutorial assumes that you have a basic knowledge of HTML, CSS, JavaScript, and React.js. You don’t need to be a TypeScript expert to follow this tutorial.

Setting up the Development Environment

Setting up the development environment is the first step in building our weather app. We will use CRA to create our react project.

Make sure you have nodejs and npm installed.

Run the following command to initialize a new project:

npx create-react-app weather_app --template typescript

After the above is done, then you can run the following:

cd weather_app
npm start

Your default browser will be opened at http://localhost:3000/ with the following content:

Set up TailwindCSS

We first need to add Tailwind CSS as a dev dependency in our project:

npm install -D tailwindcss

Then we create a tailwind.config.js file with the following command:

npx tailwindcss init

Add the paths to all of our template files in our tailwind.config.js file by replacing the content of our file with the below:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to our CSS by updating index.css file with the following code:

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

We can now test that Tailwind is working by updating the content of our App.tsx with the below code:

function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  );
}

export default App;

App.css should be deleted since its styling is no longer needed.

Our browser should have the following content at this point:

Other dependencies

Go ahead and install some other dependencies we will be using:

npm install @heroicons/react @tailwindcss/forms axios

axios to make asynchronous requests.
@tailwindcss/forms to style our form.
@heroicons/react to display icons.

Our tailwind.config.js needs to be updated to make use of @tailwindcss/forms plugin.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [require("@tailwindcss/forms")],
};

Finally, add the colors we will be using to the theme key in our tailwind.config.js.

module.exports = {
...
theme: {
        extend: {
            colors: {
                black: {
                    1: "#323544",
                    2: "#0000001a",
                    3: "#262936",
                },
                white: {
                    DEFAULT: "#fff",
                    1: "#bfc1c8",
                },
                blue: {
                    "1": "#009ad8",
                },
            },
        },
    },
...
}

Get the OpenWeatherMap API Key

OpenWeatherMap provides minutely forecast, historical data, current state, and from short-term to annual forecasted weather data. We can get our weather forecasts from OpenWeatherMap by getting an API key.

Head over to **https://openweathermap.org/api** to create an account and generate an API Key.

It’s a good idea to save secret keys like our API key in a .env file so as to reduce the risk of unauthorized access.

Note: Variables saved in .env in our React application are not entirely hidden. This is because environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

Create a .env file at the root level and store your weather key there:

// /.env
REACT_WEATHER_KEY=your_weather_key

Notice our key name starts with REACT_APP. The reason for this naming convention is to avoid conflicts and ensure that the environment variables are only applied to your React application.

Also, add .env to your .gitignore so as not to push your secret key(s) to the public.

Get Sample data

We can now use our weather key to get sample data of what we would be expecting when we create a function to fetch our weather forecasts.

If you go through openweathermap’s documentation, you will notice we can use the:

Current Weather Data to get today’s weather data
5 day weather forecast to get 5 days forecast

You can test these endpoints to see the sample data we will be using:

These sample data are going to increase our development process as we won’t need to request data each time we make changes to our code.

We should create interfaces for our sample data(source code):

// src/interfaces/weather.ts
export interface IToday {...}
export interface IForecast {..}

You can go ahead and save the sample data as constants in src/data/weather.ts as today and forecasts respectively. The list array will stand for our forecasts(source code):

// src/data/weather.ts

import { IForecast, IToday } from "../interfaces/weather";

export const today: IToday = {...}
export const forecasts: IForecast[] = [...]

Building our Components

The best way to have a maintainable and readable react project is to have different components for different purposes. Our weather app is going to make use of different components:

Navbar: contains children's components:
- Search: enables users to search for different locations.
- Histories: saves and lists searched locations.
Forecasts: contains the following children components:
- Today: displays weather data for the current day.
- Other: displays other day's forecasts.

Icons

We will be using 3 SVG icons to illustrate different weather conditions, the SVGs code can be found in the source code(Direction, Umbrella, Wind):

// src/components/icons/Direction.tsx

const Direction = () => {}

export default Direction;

// src/components/icons/Umbrella.tsx

const Umbrella = () => {}

export default Umbrella;

// src/components/icons/Wind.tsx

const Wind = () => {}

export default Wind;

Search.tsx

// src/components/Search.tsx
import { useState } from "react";

const Search = () => {
    const [query, setQuery] = useState("");

  return (
    <form
      className="w-full max-w-xs"
      onSubmit={(e) => {
        e.preventDefault();
        console.log("Get data");
      }}
    >
      <input
        type="search"
        name="search"
        id="search"
        aria-label="Search for city/country forecast"
        placeholder="Search for city/country forecast"
        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
    </form>
  );
};

export default Search;

Histories.tsx

// src/components/Histories.tsx

import { useEffect, useRef } from "react";

// Comment 1
const modalHeight = "!h-[calc(100vh-2.75rem)]"

const Histories = () => {
  // Comment 2
  const locations: string[] = JSON.parse(localStorage.getItem("locations") || "[]");
  // Comment 3
  const ulRef = useRef<HTMLDivElement>(null);

  const toggleUl = () => {
    const { current: container } = ulRef;

    if (!container) return;

    container.classList.toggle("!w-screen");
    container.classList.toggle(modalHeight);
  };

  useEffect(() => {
    const closeUIModal = () => {
      const { current: container } = ulRef;

      if (!container) return;

      container.classList.remove("!w-screen");
      container.classList.remove(modalHeight);
    }

    window.addEventListener("click", closeUIModal);

    return () => window.removeEventListener("click", closeUIModal)
  }, [])

  return (
    <div className="relative">
      <button type="button" onClick={(e) => {
        e.stopPropagation();
        toggleUl();
      }}>
        <ClockIcon className="h-6 w-6" />
      </button>
      <div
        ref={ulRef}
        className="absolute top-8 right-0 z-10 overflow-hidden h-0 w-0 bg-white transition-all duration-300 ease-in-out flex items-start justify-end pl-3 bg-opacity-5"
      >
        <div className="w-full max-w-[15rem]" onClick={e => {
          e.stopPropagation();
        }}>
          {locations.length === 0 ? (
            <p className="text-center text-gray-700 font-extrabold">
              No history
            </p>
          ) : (
            <ul className="bg-white shadow-xl rounded-lg overflow-y-auto h-full max-w-[15rem] max-h-60">
              {locations.map((location) => (
                <li
                  key={location}
                  className="flex items-center justify-between"
                >
                  <button
                    className="text-ellipsis text-left overflow-hidden whitespace-nowrap px-4 py-2 hover:bg-gray-500 transition-colors duration-150 w-full"
                    type="button"
                    onClick={() => { console.log("Get Data") }}
                  >
                    {location}
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

export default Histories;

Comment 1: The height of the modal is the height of the screen minus the height of the navbar. This is to allow users to have the opportunity to search even if the modal is opened.

Comment 2: We are getting our location history from local storage. The components re-render each time a new location is searched. This re-rendering gives us the chance to grab the new history from the local storage.

Comment 3: A transparent modal is displayed on the page when the history icon is pressed. The useRef is used to reference the modal so that it will be easy for us to close the modal without any re-rendering.

Navbar.tsx

// src/components/Navbar.tsx

import Histories from "./Histories"
import Search from "./Search"

const Navbar = () => {
  return (
    <nav className="flex item-center justify-between">
      <div className="w-full max-w-5xl mx-auto flex item-center justify-between">
        <div>
          <a href="/" className="text-2xl font-semibold">
            Forecast
          </a>
        </div>
        <Search />
        <Histories />
      </div>
    </nav>
  )
}

export default Navbar

Today.tsx

// src/components/forecasts/Today.tsx

import { today as data } from "../../data/weather";
import { windDirection } from "../../utils/weather";
import WeatherCondition from "./WeatherCondition";

const dateOptions: Intl.DateTimeFormatOptions = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

const timeOptions: Intl.DateTimeFormatOptions = {
  hour: "2-digit",
  minute: "2-digit",
};

const Today = () => {
  const date = new Date(data.dt * 1000);

  return (
    <div className="bg-black-1">
      <time
        dateTime={date.toString()}
        className="flex items-center justify-between bg-black-2 p-4"
      >
        <span>{date.toLocaleString(undefined, dateOptions)}</span>
        <span>{date.toLocaleTimeString(undefined, timeOptions)}</span>
      </time>
      <div className="px-4 py-12 lg:flex lg:items-center lg:justify-center lg:flex-col lg:h-[90%]">
        <h3 className="text-4xl mb-4">{data.name}</h3>
        <p>{data.weather[0].main}</p>
        <div className="mt-8 flex items-center justify-start">
          <p className="text-7xl">
            {data.main.temp}
            <sup className="relative text-[1.8rem] -top-8 font-semibold">o</sup>
            C
          </p>
          <figure className="w-16 h-16">
            <img
              src={`https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`}
              alt="sun icon"
            />
          </figure>
        </div>
        <div className="flex items-center justify-start space-x-2 mt-4">
          <WeatherCondition icon="umbrella" value={data.main.humidity} />
          <WeatherCondition icon="wind" value={`${data.wind.speed}m/sec`} />
          <WeatherCondition
            icon="direction"
            value={windDirection(data.wind.deg)} // Comment 1
          />
        </div>
      </div>
    </div>
  );
};

export default Today;

Comment 1: windDirection is a function that is used to determine the direction of the wind

// src/utils/weather.ts
export const windDirection = (deg: number) => {
    if (deg === 0) return "N";

    if (deg > 0 && deg < 90) return "NE";

    if (deg === 90) return "E";

    if (deg > 90 && deg < 180) return "SE";

    if (deg === 180) return "S";

    if (deg > 180 && deg < 270) return "SW";

    if (deg === 270) return "W";

    if (deg > 270 && deg < 360) return "NW";

    return "N";
};

WeatherCondition.tsx

// src/components/forecasts/WeatherCondition.tsx

import { FC } from "react";
import Umbrella from "../icons/Umbrella";
import Wind from "../icons/Wind";
import Direction from "../icons/Direction";

const Icons = {
  "umbrella": <Umbrella />,
  "wind": <Wind />,
  "direction": <Direction />
}

interface Props {
  value: string | number;
  icon: keyof typeof Icons;
}

const WeatherCondition: FC<Props> = ({ value, icon }) => {
  return (
    <div className="flex items-center justify-start">
      <figure className="w-5 h-5 mr-2">
        {Icons[icon]}
      </figure>
      <p className="font-semibold">{value}</p>
    </div>
  )
}

export default WeatherCondition

Other.tsx

// src/components/forecasts/Other.tsx

import { forecasts } from "../../data/weather";

const dateOptions: Intl.DateTimeFormatOptions = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

const Other = () => {
  return (
    <ul className="grid grid-cols-[repeat(auto-fit,minmax(20rem,1fr))] lg:flex-grow lg:flex-shrink">
      {forecasts.map((forecast, key) => {
        const date = new Date(forecast.dt * 1000);
        const day = date.toLocaleDateString(undefined, dateOptions).split(", ")[0];

        return <li key={key} className="bg-black-3 even:bg-black-1 flex flex-col items-center justify-center text-center">
          <time className="bg-black-2 py-4 block w-full">{day}</time>
          <figure className="mt-8">
            <img
              src={`https://openweathermap.org/img/wn/${forecast.weather[0].icon}@2x.png`}
              alt="sun icon"
            />
          </figure>
          <p className="text-4xl mb-8 mt-4">
            {forecast.main.temp}
            <sup className="relative text-[1.8rem] -top-8 font-semibold">o</sup>
            C
          </p>
        </li>
      })}
    </ul>
  )
}

export default Other

Forecasts.tsx

// src/components/forecasts/Index.tsx

import Today from "./Today";
import Other from "./Other";

const Index = () => {
  return (
    <section className="text-white-1 lg:flex">
      <Today />
      <Other />
    </section>
  );
};

export default Index;

Now that our components are ready, we can go ahead and update our App.tsx:

// src/App.tsx

import Navbar from "./components/Navbar";
import Forecasts from "./components/forecasts/Index";

const App = () => {
  return (
    <div className="px-4 py-3 min-h-screen bg-gray-200">
      <Navbar />
      <main className="mt-8 max-w-5xl mx-auto">
        <Forecasts />
      </main>
    </div>
  );
}

export default App

Our page should look like this:

Implement Functionalities

We need to replace our static data with real data. From our current page, you would notice we have more forecasts than we need. We have different forecasts for each day. We need to filter the forecasts in such a way that we would only display the forecasts at 00:00 of each day.

// src/utils/weather.ts
import { IForecast } from "../interfaces/weather";

export const filterForecasts = (data: IForecast[]) =>
    data.filter((list) => list.dt_txt.indexOf("00:00:00") != -1);

Next, we would implement the function that fetches the real data.

// src/services/weather.ts

import axios, { isAxiosError } from "axios";
import { IForecast, IToday } from "../interfaces/weather";
import { filterForecasts } from "../utils/weather";

const WEATHER_KEY = import.meta.env.VITE_WEATHER_KEY;

interface Data {
    today: IToday;
    forecasts: IForecast[];
}

export const getForecasts = async (query: string) => {
    const baseUrl = "https://api.openweathermap.org/data/2.5";
    // Comment 1
    const searchParams = new URLSearchParams({
        q: query,
        units: "metric",
        appid: WEATHER_KEY,
    }).toString();

    const urls = [
        `${baseUrl}/weather?${searchParams}`,
        `${baseUrl}/forecast?${searchParams}`,
    ];

    try {
        const requests = urls.map((url) => axios.get(url));

        // Comment 2
        const responses = await Promise.all(requests);

        const [today, forecasts] = responses.map((response) => response.data);

        const data: Data = {
            today,
            forecasts: filterForecasts(forecasts.list),
        };

        return data;
    } catch (error) {
        let message = "Unknown error";

        if (isAxiosError(error)) {
            message =
                error.message === "Network Error"
                    ? "Please! Check your internet connection"
                    : "Location not found";
        }

        throw new Error(message);
    }
};

Comment 1 URLSearchParams encodes the query before adding it to the URL. You can read more about it in my article: Create Dynamic URLs with URL Constructor in JavaScript.
Comment 2 Promise.all executes our requests in parallel and returns the response of each request. It returns an error for the whole request if any of the requests fails. We used Promise.all because the result of one doesn’t depend on the other.

We will start updating our components from the base, App.tsx

App.tsx

// src/App.tsx

import { useState } from "react";
import Navbar from "./components/Navbar";
import Forecasts from "./components/forecasts/Index";
import { IFetchWeather } from "./interfaces/weather";

const defaultWeather: IFetchWeather = {
  loading: false,
  data: null,
  error: null,
};

const App = () => {
  const [forecasts, setForecasts] = useState<IFetchWeather>(defaultWeather);

    // Comment 1
  const handleSetForecasts = (forecasts: Partial<IFetchWeather>) => {
    setForecasts((prev) => ({ ...prev, ...forecasts }));
  }

  return (
    <div className="...">
      <Navbar handleSetForecasts={handleSetForecasts} />
      <main className="...">
        <Forecasts {...forecasts} />
      </main>
    </div>
  );
}

export default App

Comment 1 Typescript provides the Partial utility type to make all fields of an interface optional. We are using Partial to make sure not all fields are compulsory as we won’t be updating all keys at once.

Our interfaces need to be updated to have IFetchWeather

// src/interfaces/weather.ts

export interface IFetchWeather {
    loading: boolean;
    data: { today: IToday; forecasts: IForecast[] } | null;
    error: null | string;
}

Navbar.tsx

// src/components/Navbar.tsx

import { FC } from "react";
import { getForecasts } from "../services/weather";
import { IFetchWeather } from "../interfaces/weather";
import Histories from "./Histories"
import Search from "./Search"

interface Props {
  handleSetForecasts: (forecasts: Partial<IFetchWeather>) => void;
}

const Navbar: FC<Props> = ({ handleSetForecasts }) => {
    // Comment 1
  const fetchForecasts = async (query: string) => {
    try {
      handleSetForecasts({ loading: true, data: null, error: null });
      const data = await getForecasts(query);
      handleSetForecasts({ data });
    } catch (error: any) {
      handleSetForecasts({ error: error.message });
    } finally {
            // Commnet 2
      handleSetForecasts({ loading: false });
    }
  };

  return (
    <nav className="...">
      <div className="...">
        ...
                ...
        <Search fetchForecasts={fetchForecasts} />
        <Histories fetchForecasts={fetchForecasts} />
      </div>
    </nav>
  )
}

export default Navbar

Comment 1 fetchForecasts resets the forecasts state before fetching new data and then updates the forecasts state depending on the result.
Comment 2 Finally runs whether there is an error or data. This is the best place to have our cleanup instead of repeating the same code in the try and catch blocks.

Search.tsx

// src/components/Search.tsx

import { FC, useState } from "react";
import { persistLocation } from "../utils/weather";

interface Props {
  fetchForecasts: (query: string) => Promise<void>;
}

const Search: FC<Props> = ({ fetchForecasts }) => {
  const [query, setQuery] = useState("");

  return (
    <form
      className="w-full max-w-xs"
      onSubmit={(e) => {
        e.preventDefault();
                // Comment 1
        fetchForecasts(query);
                persistLocation(query);
      }}
    >
      ...
    </form>
  );
};

export default Search;

Comment 1 We fetch new data each time the user presses enter.

persistLocation function updates the local storage each time a new location is searched:

// src/utils/weather.tsx

export const persistLocation = (location: string) => {
    const locations = localStorage.getItem("locations");

    if (!locations) {
        localStorage.setItem("locations", JSON.stringify([location]));
        return;
    }

    const parsedLocations: string[] = JSON.parse(locations);

    if (parsedLocations.includes(location)) return;

    localStorage.setItem(
        "locations",
        JSON.stringify([...parsedLocations, location])
    );
};

Histories.tsx

// src/components/Histories.tsx

import { FC, useEffect, useRef } from "react";
import { ClockIcon } from "@heroicons/react/20/solid";

const modalHeight = "!h-[calc(100vh-2.75rem)]"

interface Props {
  fetchForecasts: (query: string) => Promise<void>;
}

const Histories: FC<Props> = ({ fetchForecasts }) => {
  // ...

  return (
    <div className="relative">
      // ....
    </div>
  );
};

export default Histories;

In the same file, change the location button to fetch new data when a location is clicked:

// src/components/Histories.tsx

<button
    className="..."
  type="button"
  onClick={() => fetchForecasts(location)}
 >
  {location}
 </button>

Forecasts.tsx

import Today from "./Today";
import Other from "./Other";
import { IFetchWeather } from "../../interfaces/weather";
import { FC } from "react";

const Index: FC<IFetchWeather> = ({ data, error, loading }) => {
  if (loading) return <p>Loading...</p>;

  if (error) return <p className="font-semibold text-lg text-red-600">{error}</p>;

  if (!data) return null;

  return (
    <section className="text-white-1 lg:flex">
      <Today data={data.today} />
      <Other forecasts={data.forecasts} />
    </section>
  );
};

export default Index;

This component has been updated to display different items based on if the data is still loading if there is an error or if data is available.

Today.tsx

// src/components/forecasts/Today.tsx

import { FC } from "react";
import { windDirection } from "../../utils/weather";
import WeatherCondition from "./WeatherCondition";
import { IToday } from "../../interfaces/weather";

const dateOptions: Intl.DateTimeFormatOptions = {
  weekday: "long",
  minute: "2-digit",
};

const Today: FC<{ data: IToday }> = ({ data }) => {
  const date = new Date(data.dt * 1000);

  return (
    <div className="bg-black-1">
            ...
        </div>
    )
}

Other.tsx

// src/components/forecasts/Other.tsx

import { FC } from "react";
import { IForecast } from "../../interfaces/weather";

interface Props {
  forecasts: IForecast[]
}

const dateOptions: Intl.DateTimeFormatOptions = {
  weekday: "long",
  day: "numeric",
};

const Other: FC<Props> = ({ forecasts }) => {
  return (
    <ul className="..">
            ...
        </ul>
    )
}

We can check our browser now to see how this works.

Conclusion

This comes to the end of our weather app. The app could still be improved by:

preventing the user from searching for an empty query.
making sure persisted/saved locations are case-insensitive.
deleting history.

Create Dynamic URLs with URL Constructor in JavaScript

Olaleye Blessing — Tue, 18 Apr 2023 08:12:29 +0000

In web development, one of the essential components of building a frontend web application is constructing URLs dynamically. Creating clean and consistent URLs is crucial for both search engine optimization and user experience. JavaScript provides the URL constructor as a built-in class, to create and maintain dynamic URLs without having to hard-code them every time. In this article, we will explore what a URL constructor is, different components/parts of a URL, and how to use a URL constructor to build dynamic URLs.

Prerequisite

To understand this article, you should have a basic knowledge of JavaScript and ES6 syntax.

URL Constructor

The URL Constructor is a built-in JavaScript object that allows us to create a URL object from a string. The URL object provides methods to access and manipulate the different components of a URL, such as the hostname, protocol, pathname, and query parameters. To create a URL object, we simply instantiate it with the new operator, passing in the URL string as an argument:

new URL(url, base)
// OR
new URL(url)

url is the full URL or path only if base is not provided.
base is a string representing the base URL.

When both base and url arguments are provided, then the URL will be generated relative to the base.

new URL("/tools", "https://www.asyncapi.com")
// https://www.asyncapi.com/tools

Before diving more into URL constructor, let’s first go over the components of a URL.

Components of a URL

URLs are composed of several components, each of which plays a specific role in identifying and locating the resource. Taking the below URL as an example:

Scheme

The first part of a URL is the scheme, and it specifies the protocol that will be used to access a resource. Some common schemes are http and https. Our sample URL uses the https scheme.

Host

The host is the domain name or IP address that identifies where the resource is located. In our example, the host is www.asyncapi.com.

The combination of a scheme and host forms the base argument of a URL constructor.

Path or Pathname

The path specifies the location of the resource. It typically consists of a series of directories separated by slashes. In our example, the path is /tool.

The path is the first argument provided to the URL constructor if a base argument is provided.

Query String or Search

The query string is an optional part of the URL that contains data to be parsed as parameters. The query string begins with a question mark (?) and consists of one or more key-value pairs separated by ampersands (&). In our example, the query string is langs=JavaScript&techs=Node.js.

Hash or Document Fragment

The hash is an optional part of the URL that identifies a specific section of the resource. It begins with a hash (#) and is often used with HTML pages to link to specific sections of the page. In our example, the hash is Converters.

Modifying a URL

The URL Constructor also allows us to modify a URL by changing its components. We can use the same URL object methods to set new values to the different components. The most common component is modify is the query string.

The URL object has a searchParams property that returns a URLSearchParams object. The searchParams property can be used to build dynamic key-value pairs of a query string. Some common method that can be used include:

get(name) - get a key by name
set(name, value) - replace/set a key by name
append(name, value) - add a key by name
delete(name) - remove a key by name

The query string in our previous URL, https://www.asyncapi.com/tools?langs=JavaScript&techs=Node.js#Converters can be created like this:

// instantiate a new URL object
const url = new URL("/tools", "https://www.asyncapi.com");
// build the query string
url.searchParams.set("langs", "JavaScript");
url.searchParams.set("techs", "Node.js");

console.log(url.toString());
// https://www.asyncapi.com/tools?langs=JavaScript&techs=Node.js

An URLSearchParams object instance can also be used to create to build the query string. We won’t be using the base and url argument in this case:

let query = new URLSearchParams();
query.set("langs", "JavaScript");
query.set("techs", "Node.js");

console.log(query.toString());
// langs=JavaScript&techs=Node.js

Why Use URL and URLSearchParams

Validity

When working with URLs, it's important to ensure that they are valid and conform to the proper syntax. The URL and URLSearchParams objects automatically encode and decode special characters(spaces, +, &, e.t.c) in URLs, and can help prevent syntax errors and other issues. Consider this query string:

tech=Spring Cloud Streams
langs=C/C++

Constructing this query string with pure string will definitely break the URL because URL shouldn’t have spaces:

let url = "https://www.asyncapi.com/tools?techs=Spring Cloud Streams&langs=C/C++";

The easiest way to construct this is to use the URL and URLSearchParams.

Using URL

let url = new URL("https://www.asyncapi.com/tools");
url.searchParams.set("techs", "Spring Cloud Streams");
url.searchParams.set("langs", "C/C++");

Then use the toString() method provided by URL to get the full URL.

console.log(url.toString())
// https://www.asyncapi.com/tools?techs=Spring+Cloud+Streams&langs=C%2FC%2B%2B

Using URLSearchParams

let url = new URL("https://www.asyncapi.com/tools?");
let query = new URLSearchParams();
query.set("tech", "Spring Cloud Streams")
query.set("langs", "C/C++")

let fullUrl = `${url}${query.toString()}`;
console.log(fullUrl);
// https://www.asyncapi.com/tools?techs=Spring+Cloud+Streams&langs=C%2FC%2B%2B

URLSearchParams really shines when building a filter option for a page, e.g a search page. I made use of it in one of my Pull Requests on AsyncAPI repo. URLSearchParams made sure the filter options are encoded before adding it to the page URL.

Readability

Apart from avoiding issues, using URL and URLSearchParams constructors improve code readability. It’s clear what path and query string we are building.

// set the base and path
const url = new URL("/tools", "https://www.asyncapi.com");

// build the query string
url.searchParams.set("langs", "JavaScript");
url.searchParams.set("techs", "Node.js");

if(true) {
  url.searchParams.delete("langs");
}

//

Conclusion

URL constructors and URLSearchParams are powerful tools that make it easier to build dynamic URLs in JavaScript. They automatically encode and decode special characters to avoid syntax errors, and provide a readable way to build query strings. By using these tools, you can create clean and consistent URLs that are essential for search engine optimization and user experience.

You can read the following articles to learn more about URL and URLSearchParams:

A Beginner's Guide to React Custom Hooks

Olaleye Blessing — Sat, 25 Mar 2023 11:53:38 +0000

React hooks have been a game changer for developers since they were introduced in React 16.8. Hooks give developers access to state and other React features without using class components. This tutorial will discuss how to create custom React hooks.

Prerequisites

To understand this tutorial, you should have a basic understanding of React, JavaScript, and ES6 syntax. It's also recommended that you have some experience using hooks.

A Quick Overview of React Hooks

Before hooks came along, state and other React features could only be used in class components. With hooks, you can create reusable stateful logic that can be shared across multiple components. Some of the commonly used React hooks are useState, useEffect, useContext, and useRef.

Rules Guiding Usage of React Hooks

There are a couple of rules that should be followed when creating and using hooks:

Names of hooks must start with "use" to indicate that it is a hook.

 const useMyHook = () => {/*....*/}

 const useAnotherHook = () => {/*....*/}

Hooks should only be used at the top level of a functional component or another hook. They should not be used inside loops, conditions, or nested functions as they can lead to unexpected behavior.

  const MyComponent = () => {
      const items = [];

      if(items.length > 2) {
        useMyHook(); // do not do this
      }

      items.forEach(item => useMyHook()); // do not do this

      return <p>My component</p>
  }

Hooks must only be called from within a functional component or another hook. They cannot be called from regular JavaScript functions.

 const myFunction = () => {
   const hookResult = useMyHook(); // wrong!
 }

 const useMyHook = () => {
   const other = useMyOtherHook(); // correct!
   // .............
   // .............
 }

 const MyComponent = () => {
   const myHook = useMyHook();

   return <p>My Component</p>
 }

Why Create Custom Hooks

Creating custom hooks is useful for quite a number of reasons:

Custom hooks allow us to extract and reuse stateful logic in our React components. By encapsulating stateful logic in a custom hook, we can make our code more modular and easier to maintain.
Custom hooks allow us to separate concerns in our code, making it easier to read and test.

Creating a Custom Hook

Now that we have a reason to use custom hooks, let’s create three hooks and see them in action:

useWindowWidth
useLocalStorage
useFetch

💡 Note: You can find the code for each hook in the sandbox.

`useWindowWidth`

useWindowWidth allows us to get the current width of the window. It uses the resize event to update the window's width whenever the window is resized:

// /src/hooks/useWindowWidth.js
import { useState, useEffect } from "react";

// notice that the hook name starts with `use`
export const useWindowWidth = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return { windowWidth };
};

With this hook present, we don’t have to write the logic for resizing the window every time we want to get the window’s width in a component.

Also notice that we are returning a value. It’s common but not compulsory to return any JavaScript data type from a hook. We are returning the windowWidth in an object so that it will be easily destructured.

We will call our hook at the top level of any component that wants to use it:

// /src/components/Window.jsx
import { useWindowWidth } from "./../hooks/useWindowWidth";

const Window = () => {
  const { windowWidth } = useWindowWidth();

  return (
    <section>
      <h1>Window width:</h1>
      <p>{windowWidth}</p>
    </section>
  );
};

export default Window;

`useLocalStorage`

useLocalStorage allows us to store data in the browser’s local storage and retrieve it in a different component:

// /src/hooks/useWindowWidth.js
import { useState } from "react";

export const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    const localVal = localStorage.getItem(key);

    return localVal === null ? initialValue : JSON.parse(localVal);
  });

  const updateValue = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return { value, updateValue };
};

Just like normal functions, custom hooks can also accept any numbers of arguments. We passed in the key and an initial value in this case:

key represents the local storage key.
initialValue represents a default value to use if there is no value for the key in the local storage.

Notice we are returning a value and function this time around. The updateValue can be called just like every other JavaScript function.

We can then use our hook like this:

// /src/components/Stack.jsx
import { useLocalStorage } from "./../hooks/useLocalStorage";

const Stack = () => {
  const { value: stack, updateValue: updateStack } = useLocalStorage(
    "stack",
    "JS"
  );

  return (
    <section>
      <h1> Stack: </h1>
      <p>{stack}</p>
      <button onClick={() => updateStack(stack === "JS" ? "TS" : "JS")}>
        Update stack
      </button>
    </section>
  );
};

`useFetch`

useFetch fetches data asynchronously. It returns these states:

loading determines if the request is still processing.
data represents the resource we requested.
error represents an error message.

// /src/hooks/useFetch.js
import { useEffect, useState } from "react";

export const useFetch = (url) => {
  const [resource, setResource] = useState({
    loading: true,
    error: null,
    data: null
  });

  useEffect(() => {
    const fetchData = async () => {
      try {
        const req = await fetch(url);
        const data = await req.json();
        setResource((prev) => ({ ...prev, data }));
      } catch (error) {
        setResource((prev) => ({ ...prev, error: error.message }));
      } finally {
        setResource((prev) => ({ ...prev, loading: false }));
      }
    };

    fetchData();
  }, []);

  return resource;
};

💡 Note: This useFetch isn't production ready.

We can then call our hook in any component like this:

// /src/components/Posts.jsx
import { useFetch } from "./../hooks/useFetch";

const postsUrl = "<https://jsonplaceholder.typicode.com/posts>";

const Posts = () => {
  const { data, loading, error } = useFetch(postsUrl);

  if (loading) return <div>Loading</div>;

  if (error) return <div>Error</div>;

  const posts = [...data].slice(1, 10);

  return (
    <section>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.body}</li>
        ))}
      </ul>
    </section>
  );
};

export default Posts;

Custom Hook Share Stateful Logic, not State itself

Custom hooks are meant to share stateful logic, and not state itself. Two different components using the same custom hook are not sharing the same state that the custom hook provides. This means that you should not use a custom hook to share the actual state between components. When you need to share the state itself between multiple components, lift it up to a parent and pass it down instead.

Let's look at our useLocalStorage for an example. Assume that we have another component, Profile, that calls the hook like this:

// /src/components/Profile.jsx
import { useLocalStorage } from "../hooks/useLocalStorage";

const Profile = () => {
  const { value: gender, updateValue: updateGender } = useLocalStorage(
    "gender",
    "Male"
  );

  return (
    <section>
      <h1> Gender: </h1>
      <p>{gender}</p>
      <button
        onClick={() => updateGender(gender === "Male" ? "Female" : "Male")}
      >
        Update gender
      </button>
    </section>
  );
};

export default Profile;

The Stack and Profile components are not sharing the same state even though they are calling the useLocalStorage hook. Updating our stack with the function returned by useLocalStorage won't update the gender, likewise updating the gender won't update the stack.

Conclusion

Custom React hooks are a powerful tool for creating reusable stateful logic in your React applications. They allow you to separate concerns and make your code more modular and easier to maintain. By following the rules for using hooks and starting with simple examples, you can create custom hooks that are easy to use.

You can read more about custom hooks from the react documentation.

Happy coding.

Client-Side Form Validations with HTML and JavaScript: Part 2

Olaleye Blessing — Wed, 08 Mar 2023 19:05:04 +0000

In the first part of this series, we discussed HTML form validation using built-in HTML5 attributes. While using HTML5 attributes is a simple and effective way to perform form validation, it has some limitations. For example, it only works in modern browsers that support HTML5 and doesn't allow for complex validation rules.

This blog post will discuss how to perform form validation using JavaScript. You can go ahead and grab the starter files if you would love to code along.

Prerequisites

This tutorial assumes that you have a basic knowledge of HTML and JavaScript.

Why Use JavaScript for Form Validation

Although HTML5 attributes offer a basic level of form validation, utilizing JavaScript for form validation offers various advantages compared to relying solely on HTML5 attributes:

Better custom validation: With JavaScript, you can implement custom validation rules that go beyond what HTML5 attributes offer. JavaScript allows you to validate input in unique ways that match your specific needs. You can create custom validation functions to check for specific formats, compare values between fields, and perform other complex validation checks.
More control: HTML5 form validation attributes limit you to predefined validation types. JavaScript gives you greater control over the form validation process. You can define the validation rules, error messages, and feedback mechanisms, and can control how the form behaves based on the validation result.
Cross-browser compatibility: HTML5 form validation attributes may behave differently across different browsers. With JavaScript, you can ensure that your validation works consistently across all browsers.

Form Validation Using JavaScript

There are a couple of steps we need to take to be able to validate our form with JavaScript:

Access form elements.
Add event listeners to the form and/or form elements.
Create custom validation functions
Display error message.

Access Form Elements

Accessing form elements is an important step in validating a form using JavaScript. We can use the document object's method, getElementById, to access form elements. getElementById method allows us to access a form element by its unique id attribute. Consider our name input field:

<div>
  <label for="password">Password</label>
  <input type="password" id="password" name="password" />
</div>

We can access the name input field with the getElementById method like so:

const passwordInput = document.getElementById("password");

We can also access the form elements by using form.elements. form.elements returns all the form control contained in an element. You can access a form control by using its name or index:

const form = document.getElementById("form");
const { name, email, password } = form.elements;

We can start our validation once we have access to our input fields.

Add Event Listeners to the Form or Form Elements

JavaScript provides several methods we can use to validate our form. Some of these events include:

submit: triggers when the form is submitted
input: triggers when the value of an input element changes
change: triggers when the value of an element(select element included) changes
focus: triggers when an element is focused
blur: triggers when an element loses focus

The choice of which event to use depends on your specific needs and the type of feedback you want to provide to the user. Let’s add submit event to our form and input event to our password.

// access elements
const passwordInput = document.getElementById("password");
const form = document.getElementById("form");

// add event listeners
passwordInput.addEventListener("input", (e) => {
    console.log("Password changed");
});

form.addEventListener("submit", (e) => {
    e.preventDefault();
  console.log("form submitted");
});

💡 e.preventDefault() will prevent our form from being submitted.

Create Custom Validation Functions

JavaScript provides a powerful set of tools for validating form data. We can:

use regular expressions to validate input patterns, e.g email patterns.
compare values against other fields, e.g password and confirm password.
make AJAX request to check an input field, e.g check if a username is unique.

Let’s go ahead and make sure that the user’s password is at least 6 characters

// access elements
// ...

const validatePassword = (password) => password.length > 5;

passwordInput.addEventListener("input", (e) => {
  // update our event listener
  const { value } = e.target;
  const isValid = validatePassword(value);

  console.log(isValid);
});

Let’s also make sure that the name field is not empty before submitting the form:

// other code 
// .....
const validateName = (name) => name.length > 0;

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const { name } = e.target.elements;
  const isNameValid = validateName(name.value);

  if (!isNameValid) {
    console.log("Please enter a valid name");
    return;
  }

  console.log("submitted");
});

Enter a name and password to test the current implementation. However, there is an issue with the code as it still allows the user to submit the form without entering a password. This occurs because the password is only validated when it's changed, rather than when the user changes the password and attempts to submit the form.

Let’s validate the password too when the user tries to submit the form:

// other code 
// .....
const validateName = (name) => name.length > 0;

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const { name, password } = e.target.elements;
  const isNameValid = validateName(name.value);
    const isPasswordValid = validatePassword(password.value);

  if (!isNameValid) {
    console.log("Please enter a valid name");
    return;
  }

    if (!isPasswordValid) {
        console.log("Please enter a valid password");
        return;
    }

    console.log("submitted");
});

💡 I’m sure you still noticed that a user can submit the form even without an email. You can go ahead and add a validation to the email field.

Display Error Messages

One of the main reasons for creating a custom validation is to be able to display custom error messages. As seen in the earlier HTML validation constraint examples, whenever a user attempts to submit an invalid form, the browser shows an error message. However, there's no standard method to alter their appearance using CSS.

Let’s go ahead and create a custom error message for our input fields:

// other code
const passwordError = document.getElementById("passwordError");
const nameError = document.getElementById("nameError");

passwordInput.addEventListener("input", (e) => {
  const { value } = e.target;
  const isValid = validatePassword(value);

  if (isValid) {
    passwordError.textContent = "";
  } else {
    passwordError.textContent = "Password must be longer than 5 characters";
  }
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const { name, password } = e.target.elements;
  const isNameValid = validateName(name.value);
  const isPasswordValid = validatePassword(password.value);

  if (!isNameValid) {
    nameError.textContent = "Name must not be empty";
    return;
  } else {
    nameError.textContent = "";
  }

  if (!isPasswordValid) {
    passwordError.textContent = "Password must be longer than 5 characters";
    return;
  } else {
    passwordError.textContent = "";
  }

  console.log("Submitted");
});

💡 Some basic CSS has been applied to our error message.

Conclusion

JavaScript form validation allows for more complex validation rules and works in all modern browsers. By adding event listeners to form elements, you can check the input value and provide feedback to the user if the input is invalid. While it requires more code than using HTML attributes, it provides more flexibility and customization options.

This tutorial covers some basic validations, but there are ways to enhance the validation process, such as:

Customizing the default error message provided by HTML5.
Displaying icons to indicate valid and invalid fields.
Triggering validation when an input field loses focus.

Client-Side Form Validations with HTML and JavaScript: Part 1

Olaleye Blessing — Wed, 08 Mar 2023 07:36:57 +0000

Form validation is an essential aspect of web development as it ensures that the data submitted by users is accurate, complete, and secure. In simple terms, it checks whether the data entered by the user in a web form meets the required criteria or not. If the data is not valid, the form should not be submitted, and the user should be prompted to correct the errors.

In this 2-post series, we are going to look at types of form validation and 2 ways to perform client-side validation. This first part will cover how to use the built-in HTML5 attributes to perform form client-side validation. Let’s get started.

Prerequisites

This tutorial assumes that you have a basic knowledge of HTML.

Types of Form Validation

There are 3 ways to validate a form, and each method has its advantages and disadvantages.

Server-side Validation: In server-side validation, the form data is submitted to the server, and the server-side script checks the data for errors. This method is reliable and secure as the data is validated on the server side. However, it requires a round-trip to the server, which can cause delays in the user experience.
Client-side Validation: In client-side validation, the validation is performed on the client side(in the browser) using JavaScript or HTML5. This method is faster and more responsive as it doesn't require a round-trip to the server. However, it can be less secure as the validation can be bypassed by a knowledgeable user.
Hybrid Validation: Hybrid validation is a combination of server-side and client-side validation. This method is the most reliable and secure as it combines server-side and client-side validation benefits. It provides a quick response to the user while ensuring the data is validated securely. Most modern websites use hybrid validation to validate user data.

Why Perform Client-side Validation

There are many benefits to performing client-side validation:

Improves user experience: Client-side validation can provide immediate feedback to the user about errors in their input. This helps users quickly correct mistakes and prevent them from having to wait for the server to respond with validation errors.
Reduces server load: Client-side validation can reduce the number of unnecessary requests sent to the server. This reduces server load and improves overall performance.
Reduces bandwidth usage: By reducing the number of requests sent to the server, Client-side validation reduces the amount of data that needs to be transferred over the network. This helps users with limited bandwidth or slow connections.
Provides security: Client-side validation prevents certain types of security vulnerabilities, such as SQL injection attacks, by rejecting invalid input before it is sent to the server.
Improves accessibility: Client-side validation improves accessibility for users with disabilities by providing immediate feedback about errors in their input.

Ways to Perform Client-side Validation

There are two ways to perform client-side validation:

Built-in form validation using HTML5 form validation attributes.
Form validation using JavaScript.

HTML5 Built-in Form Validation Attributes

HTML5 introduced a set of attributes that can be added to form elements to perform validation. These attributes are used to specify the type of input expected from the user, the required format, the minimum and maximum length, and other conditions that the input should meet. Some of these attributes include:

type
required
pattern
min and max
minlength and maxlength

`Type` Attribute

The type attribute is used to specify the type of input expected from the user. For example, the type attribute can be used to specify that the input should be an email address, a number, or a date.

Here’s an example for an email address input:

<label for="email">Email:</label>
<input type="email" id="email" name="email" required />

The browser does an automatic validation on each of these input types.

type="email" causes the browser to validate that the input contains an "@" symbol and a domain name.
type="number" prevents the user from entering letters in the input field.
type="url" ensures that only text that matches the standard format for URLs is entered into the input box.

`Required` Attribute

The required attribute is used to specify that a field must be filled in before the form can be submitted. It is used with input elements such as text, email, and password.

Here's an example showing that the input field is required:

<label for="name">Name:</label>
<input type="text" id="name" name="name" required />

The browser automatically checks if the name field has been filled in before submitting the form.

`Pattern` Attribute

The pattern attribute is used to specify a regular expression that the input should match. This attribute can be used to ensure that the input meets a specific format, such as a phone number, a postal code, or a username.

Here is an example showing that the username must be in lowercase:

<label for="username">Username:</label>
<input type="text" id="username" name="username" pattern="[a-z]" required />

The browser submits the form if the username is lowercase, otherwise shows an error.

`Min` and `Max` Attributes

The min and max attributes are used to specify the minimum and maximum values for a number input. For example, you can use the min and max attributes to ensure that the input is within a specific range.

Here's an example of using the min and max attributes to ensure that the input is between 2 and 10:

<label for="visitors">Visitors:</label>
<input type="number" id="visitors" name="visitors" min="2" max="10" required />

`Minlength` and `Maxlength` Attributes

The minlength and maxlength attributes are used to specify the minimum and maximum length of text that can be entered into an HTML input field. All input fields that accept texts can use minlength and maxlength to constraint their text length.

Here is an example of an input element using the minlength and maxlength attributes:

<label for="username">Username:</label>
<input type="text" id="username" name="username" minlength="4" maxlength="30" required />

Conclusion

HTML form validation using attributes is a simple yet effective way to ensure that the data input by users meets the website's requirements. By using these attributes, you can specify the type of input expected, the required format, and other conditions that the input should meet. Some of the attributes we used are:

type
required
pattern
min and max
minlength and maxlength

In the second part of this series, we'll discuss how to perform form validation using JavaScript.

How to Create a Video Background with HTML and CSS

Olaleye Blessing — Sun, 26 Feb 2023 14:07:54 +0000

A video background refers to a video clip or footage that is used as the background of a website. It is often used to enhance the visual appeal of the content and to create an immersive experience for the viewer. We will go over how to create a video background with HTML and CSS in this tutorial. A GitHub repo has been provided with the starter files and full source code. You can also check out the live version:

Prerequisites

This tutorial assumes that you have a basic knowledge of HTML and CSS.

Why video background?

Video backgrounds can create an eye-catching and immersive user experience. They allow you to showcase high-quality visual content and set the mood or tone for your website. When the correct video is used, a video background is an easy yet effective approach to distinguish your website from the billions of other websites online.

Getting Started

We will use the following to create our video background:

video HTML element.
source HTML element.
CSS styling.

Video HTML Element

The <video> HTML element embeds a media player which supports video playback into the document.

To create the video background, we add a <video> element in the HTML with the playsinline, autoplay, loop, and muted attributes.

<header>
  <video playsinline autoplay loop muted>
  </video>
</header>

Each of the video attributes plays a role in making the background video work:

playsinline makes the video play on iOS.
autoplay makes sure that the video starts playing as soon as the page loads.
loop enables the video to play continuously without stopping.
muted removes the video sound.

💡 Note: We didn't include control attributes because we don't want our users to be able to control our video. That is, we don't want them to play/pause our video.

Our screen shouldn't display any video at this point:

Source HTML element

The source element will be used to provide multiple resources for our video element. This means that we can provide different formats(.mp4, .webm, and .ogg) of our video.

A video with different formats has been provided in the GitHub repo.

<header>
  <video playsinline autoplay loop muted>
    <source src="./videos/jellyfish.mp4" type="video/mp4" /> 
    <source src="./videos/jellyfish.webm" type="video/webm" />
    <source src="./videos/jellyfish.ogg" type="video/ogg" />
  </video>
</header>

Our screen should display the background of our video at this point:

Styling the video with CSS

There are different ways to style our video background. We can decide to make it a full-page video background or just a section of our website. We will look at the latter in this article.

Go ahead and add a class of cont and video to the header and video element respectively.
Some CSS properties will be given to the header to make our styling possible:

relative position enables us to control where to place the video.
fixed height constraints the height of the video.

.cont {
  position: relative;
  height: 85vh;
}

Our video element will have the following CSS properties:

position places the video inside the header.
top & left sets the vertical and horizontal position.
width & height set the dimensions.
object-fit sets how the video should be resized to fit its container(<header>).
z-index places the video behind the header content.

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

Our screen should have a fully styled video background at this point:

Now that our video background is prepared, how about adding some content to it? Let’s go ahead and add our header title.

Adding content to the video background

We‘ve set our video into place. Now we can add whatever content we want on top of it. Let’s add a title like so:

<header class="cont">
  <video class="video" playsinline autoplay loop muted>
    # ....
  </video>

  <h1 class="h1">Welcome to my website.</h1>
</header>

Then go ahead and update our CSS:

.cont {
  /* add this */
  display: flex;
  align-items: center;
  justify-content: center;
}

.h1 {
  color: #fff;
  font-size: 5rem;
}

We can even make the visibility of the title better by adding an overlay:

<header class=”cont”>
  <video playsinline autoplay loop muted>
    # ....
  </video>

  <div class="overlay"></div>
  <h1 class="h1">Welcome to my website.</h1>
</header>

Our CSS should be updated like so:

.video {
  z-index: -2;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

Our screen should have the content on the video background at this point:

Conclusion

Video backgrounds are a versatile tool for web design. With some creativity, you can achieve unique results that align with your brand and goals. Have fun with it!

To summarize, here are the main steps to create a video background:

Add a <video> element to your HTML with the necessary attributes (autoplay, loop, muted).
Include <source> elements to provide video files in multiple formats (mp4, webm, ogg).
Style the video with CSS (position, dimensions, object-fit, z-index).
Add content on top of the video and style it as needed.
Consider adding an overlay to improve text visibility.

You can even take it further by:

adding a poster attribute to the video.
making the background a full-page.

Overall, video backgrounds are an impactful way to enhance your website and leave a lasting first impression on visitors. With some experimentation, you can create unique results that are tailored to your brand and goals. Have fun with it!

DEV Community: Olaleye Blessing

Implementing Optimistic UI in React.js/Next.js

Concept of Optimistic UI

Getting Started

The Traditional Way of Doing Optimistic UI with useState

Creating The Todos Component

Creating The Todo Form

Creating The Main Page

Adding Functionalities To Our Components

Rollback UI Optimistic Update

useOptimistic: Modern way of creating optimistic UI

Syntax of useOptimistic

Usage of useOptimistic

Creating The Main Page

Creating The Todos Component

Creating The Form Component

Adding Functionalities

Benefits and Considerations when using useOptimistic

Essential Tips on Optimistic UI

Conclusion

Mastering Pattern-Matching in Elixir

Prerequisite

Basics of Pattern-Matching

Tuples

Lists

Maps

Structs

Functions

Case macro

With/1

Benefits of Pattern-matching

Code Readability

Destructuring

Error Handling

Practical Examples

Recursion

Authentication

Conclusion

The CSS Cascade, Inheritance, and Specificity

The CSS Cascade

Inheritance

Specificity

Combining Selectors and Calculating Specificity

Combining the three: The CSS Cascade, Inheritance and Specificity

Conclusion

Helpful links:

Build a Weather App with React.js, TypeScript, and Tailwind CSS

*Prerequisites*

Setting up the Development Environment

Set up TailwindCSS

Other dependencies

Get the OpenWeatherMap API Key

Get Sample data

Building our Components

Icons

Search.tsx

Histories.tsx

Navbar.tsx

Today.tsx

WeatherCondition.tsx

Other.tsx

Forecasts.tsx

Implement Functionalities

App.tsx

Navbar.tsx

Search.tsx

Histories.tsx

Forecasts.tsx

Today.tsx

Other.tsx

Conclusion

Create Dynamic URLs with URL Constructor in JavaScript

Prerequisite

URL Constructor

Components of a URL

Scheme

Host

Path or Pathname

Query String or Search

Hash or Document Fragment

The Traditional Way of Doing Optimistic UI with `useState`

Prerequisites

`useWindowWidth`

`useLocalStorage`

`useFetch`

`Type` Attribute

`Required` Attribute

`Pattern` Attribute

`Min` and `Max` Attributes

`Minlength` and `Maxlength` Attributes