ibrahima-ndaw.com RSS Feed

Using custom background image in Tailwind CSS (incl. dark mode)

Wed, 12 Jan 2022 10:00:00 GMT

Tailwind CSS is a nice and powerfull utility-first framework that allows crafting websites/apps rapidly. In this guide, we'll be learning how to use a custom background image with dark mode support in Tailwind CSS.

Let's get started!

Sorry for the interrupt!

If you're interested in learning React, or Next.js in a comprehensive way, I highly recommend this bestseller course:
> Next.js & React - The Complete Guide (incl. Two Paths!)

This is affiliate links, so by purchasing, you support the blog at the same time.

Setting up a Next.js and Tailwind CSS app
Configuring Tailwind CSS
Creating the Post Component
Displaying the Post Component

Setting up a Next.js and Tailwind CSS app

In this article, I'll use Next.js to start a new app; feel free to use the framework of your choice, just keep in mind what you'll learn here will apply anyway.

Begin by opening your command-line interface (CLI) and running this command:

 npx create-next-app next-tailwindcss-app

A fresh Next.js app should be created after then. Now, browse to the root of the project and install Tailwind CSS and co (its dependencies).

 yarn add -D tailwindcss postcss autoprefixer
# npm install -D tailwindcss postcss autoprefixer

Next, create your configuration files for Tailwind and PostCSS. For that, you need to execute the following command in your CLI:

 npx tailwindcss init -p

This will create two config files: one for Tailwind CSS and another for PostCSS. The purpose of these configurations is to extend the power of Tailwind to match our need.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

We've now completed the initial setup. However, we didn't tell yet Next.js that we'll be using Tailwind CSS to style our app. To do so, we have to import Tailwind in our _app.js file.

// pages/_app.jsimport "tailwindcss/tailwind.css"
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

With that step, we can now use Tailwind to style our app.

As you can see, we've gone through several configurations to get our Next.js and Tailwind app up and running. But, luckily there is a quicker way to get all of this with just one command.

Mind blowing :)

 npm create next-app --example with-tailwindcss next-tailwindcss-app

This command will use the official Next.js examples to create a new app with Tailwind CSS ready to use.

With that in place, we can now update the Tailwind config file to enable dark mode and add our custom images as well.

Configuring Tailwind CSS

Tailwind CSS makes everything easier. All we have to do to enable dark mode is to add class (or media) as value to the darkMode property.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: "class",  theme: {
    extend: {      backgroundImage: {        "nature-light": "url('/nature-light.jpg')",        "nature-dark": "url('/nature-dark.jpg')",      },
    },
  },
  variants: {
    extend: {      backgroundImage: ["dark"],
    },
  },
  plugins: [],
}

As for the background images, we inform Tailwind to use nature-light in light theme and switch to nature-dark in dark mode.

By default, only responsive variants are generated for background image utilities. We need to add dark to the backgroundImage variant to support dark mode.

Oops! I almost forget to mention that we need to add the images into the public folder in order to use the assets (as you might guess) in our app.

You can download the images here:

Image 1 by Yura Tsipak
Image 2 by Annie Spratt

Let's move on and create our components in the next section.

Creating the `Post` Component

// components/Post.js
import { useState } from "react"

const LIGHT_THEME = "light"
const DARK_THEME = "dark"

export default function Post() {
  const [theme, setTheme] = useState(LIGHT_THEME)
  const switchTheme = () => {
    if (!document.documentElement.classList.contains(DARK_THEME)) {
      document.documentElement.classList.add(DARK_THEME)
      setTheme(DARK_THEME)
    } else {
      document.documentElement.classList.remove(DARK_THEME)
      setTheme(LIGHT_THEME)
    }
  }

  return (
    <div className="bg-white dark:bg-gray-800 w-96 pb-4 rounded-3xl shadow-lg overflow-hidden">
      <div className="bg-nature-light dark:bg-nature-dark bg-cover object-cover bg-center h-56 w-full" />
      <div className="p-4 text-left">
        <h3 className="text-xl text-black dark:text-white font-semibold">
          My First Post
        </h3>
        <p className="mt-2 mb-10 text-gray-600 dark:text-gray-300">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua...
        </p>
        <button
          onClick={switchTheme}
          className="float-right px-6 py-2.5 bg-gray-800 dark:bg-white text-gray-200 dark:text-gray-800 rounded-full capitalize"
        >
          {theme} Mode
        </button>
      </div>
    </div>
  )
}

Here, we have a simple React component with two main things to underline:

The function switchTheme allows us to change the theme. Note that here, nothing is persisted to the local storage or context API because it's not the purpose of this tutorial; feel free to push things to the next level and add those features.
The dark prefix is used by Tailwind to switch between light and dark theme. All classes prefixed by dark: will be used only in dark mode. The background image for light theme will be bg-nature-light and the one for dark mode will be bg-nature-dark.

Sounds magical? Well, it is, because Tailwind handles almost everything for us.

With this in place, we can progress to the final step and import this component into the index.js file.

Displaying the `Post` Component

// pages/index.js
import Post from "../components/Post"

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-center w-full min-h-screen py-2 flex-1 px-20 text-center bg-gray-100">
      <Post />
    </main>
  )
}

We're now ready to test our Next.js app in the browser.

To do so, execute the following in the project root:

hopefully it works :)

 yarn dev
 # npm run dev

Let's visit the browser http://localhost:3000

And that's it! Our app is looking tight!

You can find the finished project on this Github repo.

Thanks for reading!

Data fetching in Next.js — How To Use SWR

Wed, 04 Nov 2020 10:00:00 GMT

Next.js offers several ways for fetching data since it supports both client and server-side rendering. One is by using SWR, which is a set of React hooks for remote data fetching.

In this tutorial, we will be looking at SWR, a library that makes things easier, such as caching, pagination, revalidation, and so on. We will also build a Next.js app (client-side) that retrieves data from JSON Placeholder using SWR.

Sorry for the interrupt!

If you're interested in learning React, or Next.js in a comprehensive way, I highly recommend these bestseller courses:
> Complete Next.js with React & Node - Beautiful Portfolio App
> React - The Complete Guide (incl Hooks, React Router, Redux)

This is affiliate links, so by purchasing, you support the blog at the same time.

What is SWR?
Setting up
Fetching the data with useSWR
Creating the components
Paginating the data with useSWRInfinite

Let's get started!

What is SWR?

SWR stands for stale-while-revalidate. It's a lightweight library created by the same team behind Next.js. It allows fetching, caching, or refetching data in realtime with React Hooks. SWR proceeds in three steps: first, it returns the cache (stale), then fetch the data from the server (revalidation), and finally come with the up-to-date data. This way, SWR increases your user experience by letting you show something to your user while retrieving the new data from the server.

SWR is backend agnostic, meaning that you can use it to retrieve data from any server that supports HTTP requests. It has as well good support for TypeScript and server-side rendering.

That said, we can get hands dirty and setting up a new Next.js app to use the SWR features.

Setting up

To set up a new app, we'll go for Create Next App. Begin by opening your command-line interface (CLI) and running this command:

	npx create-next-app next-swr-app

Install SWR package:

	npm install swr

Next, structure the folder like so:

├── components
| └── Post.js
├── pages
| └── index.js
├── useRequest.js
└── package.json

Let's break down the file structure:

Post.js is the component responsible for the display of the post object.
index.js is the home page of our app.
useRequest.js is a custom hook that helps fetch the data using SWR.

With this folder structure in place, we can start retrieving the remote data from JSON Placeholder in the next section.

Fetching the data with `useSWR`

To fetch remote data with SWR, we can use either useSWR or useSWRInfinite. However, there are some differences between the hooks. The first is used for just data fetching, while the second hook enables retrieving and paginating data. You can use useSWRInfinite to add infinite scroll or pagination in your Next.js app in no-time.

Now, let's explore the file useRequest.js:

import useSWR from "swr"

const fetcher = url => fetch(url).then(res => res.json())
const baseUrl = "https://jsonplaceholder.typicode.com"

export const useGetPosts = path => {
  if (!path) {
    throw new Error("Path is required")
  }

  const url = baseUrl + path

  const { data: posts, error } = useSWR(url, fetcher)

  return { posts, error }
}

Using this custom hook for fetching data is optional. You can alternatively use the SWR hooks directly in your components.

The fetcher function enables us to send the HTTP request to the server and then parse the response data to JSON. The fetch method comes from the unfetch package that ships with Next.js.

Next, we use the useGetPosts function to send the query with the useSWR hook. It expects to receive as arguments the url of the server and a fetcher function to execute the query. Once the data is retrieved, we return the fetched posts and an error state.

With this custom hook ready to use, we can now create the components to display the posts fetched.

Creating the components

components/Post.js

export default function Post({ post }) {
  const { title, body, id } = post
  return (
    <div className="Card">
      <h1 className="Card--title">
        {id}. {title}
      </h1>
      <p className="Card--body">{body}</p>
    </div>
  )
}

As you can see, we have a simple component that receives the post to display as a parameter. Then, we use destructuring to pull out the elements from the object in order to show the post.

App.js

import { useGetPosts } from "../useRequest"
import Post from "../components/Post"

export default function IndexPage() {
  const { posts, error } = useGetPosts("/posts")

  if (error) return <h1>Something went wrong!</h1>
  if (!posts) return <h1>Loading...</h1>

  return (
    <div className="container">
      <h1>My Posts</h1>
      {posts.map(post => (
        <Post post={post} key={post.id} />
      ))}
    </div>
  )
}

Here, we start by importing the useGetPosts hook and then pass in the path as an argument to perform the request. It returns the posts to show and an error state.

After that, we use the Post component to display the array of data. If any error occurs, we handle it accordingly with the error provided by SWR.

With this step forward, we can check if everything works in the browser. To do so, open the project on the CLI and run the following command:

  yarn dev

Or for npm

  npm run dev

Let's visit on the browser http://localhost:3000

Great! Our data are successfully fetched from the server using the useSWR hook.

As we said earlier, SWR provides another hook that allows paginating data easily. Let's update our app with useSWRInfinite.

Paginating the data with `useSWRInfinite`

It's still possible to use the useSWR hook to paginate the data, but I don't recommend that since it's extra code and SWR already offers useSWRInfinite to do it.

useRequest.js

import { useSWRInfinite } from "swr"

const fetcher = url => fetch(url).then(res => res.json())
const baseUrl = "https://jsonplaceholder.typicode.com"

export const usePaginatePosts = path => {
  if (!path) {
    throw new Error("Path is required")
  }

  const url = baseUrl + path
  const PAGE_LIMIT = 5

  const { data, error, size, setSize } = useSWRInfinite(
    index => `${url}?_page=${index + 1}&_limit=${PAGE_LIMIT}`,
    fetcher
  )

  const posts = data ? [].concat(...data) : []
  const isLoadingInitialData = !data && !error
  const isLoadingMore =
    isLoadingInitialData ||
    (size > 0 && data && typeof data[size - 1] === "undefined")
  const isEmpty = data?.[0]?.length === 0
  const isReachingEnd =
    isEmpty || (data && data[data.length - 1]?.length < PAGE_LIMIT)

  return { posts, error, isLoadingMore, size, setSize, isReachingEnd }
}

The useSWRInfinite hook expects as an argument a function that returns the request key, a fetcher function, and options. The request key (index) is what SWR uses to know what data (page) to retrieve. The initial value of the request key is 0, so we have to increment it by 1 upon each request. The second argument to define on the URL is PAGE_LIMIT, which is the number of items to fetch per request.

useSWRInfinite returns more values than that. I removed the data that I don't need here. Let's explain what these variables do:

posts is the array of the data fetched from the server.
isLoadingInitialData checks if there is still data to retrieve.
isLoadingMore checks if we're currently retrieving data.
isEmpty checks whether the array of data is empty or not.
isReachingEnd checks if the page limit is reached or not.

Next, we return the values in order to use them in our components.

App.js

import { usePaginatePosts } from "../useRequest"

import Post from "../components/Post"

export default function IndexPage() {
  const {
    posts,
    error,
    isLoadingMore,
    size,
    setSize,
    isReachingEnd,
  } = usePaginatePosts("/posts")

  if (error) return <h1>Something went wrong!</h1>
  if (!posts) return <h1>Loading...</h1>

  return (
    <div className="container">
      <h1>My Posts with useSWRInfinite</h1>
      {posts.map(post => (
        <Post post={post} key={post.id} />
      ))}
      <button
        disabled={isLoadingMore || isReachingEnd}
        onClick={() => setSize(size + 1)}
      >
        {isLoadingMore
          ? "Loading..."
          : isReachingEnd
          ? "No more posts"
          : "Load more"}
      </button>
    </div>
  )
}

Here, we first import usePaginatePosts and then pass in the API endpoint as an argument. Next, we use the values returned by the hook to display the posts and to load new data. Once the load more button clicked, SWR will send the request to the next page and then return the data. With this in place, the data now are paginated using the useSWRInfinite hook.

With this step, we can test if the pagination works by running this command on the CLI:

  yarn dev

Let's visit on the browser http://localhost:3000

And that's it! Our app is looking good!

We are done using the SWR library on the client-side with Next.js. You can find the finished project on this CodeSandbox.

Thanks for reading!

Routing in Next.js — A Complete Beginner's Guide

Thu, 01 Oct 2020 10:00:00 GMT

Next.js is a React framework that ships with all the features you need for production. Next.js enables routing in your app by using the file-system-based routing. In this guide, I will show you how routing works in Next.js.

Sorry for the interrupt!

This is affiliate links, so by purchasing, you support the blog at the same time.

How Routing works in Next.js?
Linking between pages
Passing route parameters
Dynamic routes
Dynamic nested routes

How Routing works in Next.js?

Next.js uses the file system to enable routing in the app. Next treats automatically every file with the extensions .js, .jsx, .ts, or .tsx under the pages directory as a route. A page in Next.js is a React component that has a route based on its file name.

Consider this folder structure as an example:

├── pages
|  ├── index.js
|  ├── contact.js
|  └── my-folder
|     ├── about.js
|     └── index.js

Here, we have four pages:

index.js is the home page accessible on http://localhost:3000
contact.js is the contact page accessible on http://localhost:3000/contact
my-folder/index.js is the page located on the sub-folder my-folder accessible on http://localhost:3000/my-folder
my-folder/about.js is the about page located on the sub-folder my-folder accessible on http://localhost:3000/my-folder/about

Linking between pages

By default, Next.js pre-renders every page to makes your app fast and user-friendly. It uses the Link component provided by next/link to enable transitions between routes.

import Link from "next/link"

export default function IndexPage() {
  return (
    <div>
      <Link href="/contact">
        <a>My second page</a>
      </Link>
      <Link href="/my-folder/about">
        <a>My third page</a>
      </Link>
    </div>
  )
}

Here, we have two routes:

The first link leads to the page http://localhost:3000/contact
The second link leads to the page http://localhost:3000/my-folder/about

The Link component can receive several properties, but only the href attribute is required. Here, we use a <a></a> tag as a child component to link pages. But, you can use alternatively any element that supports the onClick event on the Link component.

Passing route parameters

Next.js allows you to pass route parameters and then get back the data using the useRouter hook or getInitialProps. It gives you access to the router object that contains the params.

index.js

import Link from "next/link"

export default function IndexPage() {
  return (
    <Link
      href={{
        pathname: "/about",
        query: { id: "test" },
      }}
    >
      <a>About page</a>
    </Link>
  )
}

As you can see here, instead of providing a string to the href attribute, we pass in an object that contains a pathname property which is the route, and a query element that holds the data.

about.js

import { useRouter } from "next/router"

export default function AboutPage() {
  const router = useRouter()
  const {
    query: { id },
  } = router
  return <div>About us: {id}</div>
}

Here, we import the useRouter hook to get the data passed in. Next, we pull it from the query object using destructuring.

If you are using server-side rendering, you have to use getInitialProps to get the data.

export default function AboutPage({ id }) {
  return <div>About us: {id}</div>
}

AboutPage.getInitialProps = ({ query: { id } }) => {
  return { id }
}

Dynamic routes

Next.js enables you to define dynamic routes in your app using the brackets ([param]). Instead of setting a static name on your pages, you can use a dynamic one.

Let's use this folder structure as an example:

├── pages
|  ├── index.js
|  ├── [slug].js
|  └── my-folder
|     ├── [id].js
|     └── index.js

Next.js will get the route parameters passed in and then use it as a name for the route.

index.js

export default function IndexPage() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/[slug]" as="/my-slug">
          <a>First Route</a>
        </Link>
      </li>
      <li>
        <Link href="/my-folder/[id]" as="/my-folder/my-id">
          <a>Second Route</a>
        </Link>
      </li>
    </ul>
  )
}

Here, we have to define the value on the as attribute because the path is dynamic. The name of the route will be whatever you set on the as prop.

[slug].js

import { useRouter } from "next/router"

export default function DynamicPage() {
  const router = useRouter()
  const {
    query: { id },
  } = router
  return <div>The dynamic route is {id}</div>
}

You can get the route parameters as well with the useRouter hook on the client or getInitialProps on the server.

my-folder/[id].js

export default function MyDynamicPage({ example }) {
  return <div>My example is {example}</div>
}

MyDynamicPage.getInitialProps = ({ query: { example } }) => {
  return { example }
}

Here, we use getInitialProps to get the dynamic route passed in.

Dynamic nested routes

With Next.js, you can also nest dynamic routes with the brackets ([param]).

Let's consider this file structure:

├── pages
|  ├── index.js
|  └── [dynamic]
|     └── [id].js

index.js

export default function IndexPage() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/[dynamic]/[id]" as="/my-folder/my-id">
          <a>Dynamic nested Route</a>
        </Link>
      </li>
    </ul>
  )
}

As you can see here, we set the dynamic values on the as attribute as we did in the previous example. But this time, we have to define the name of the folder and its file.

import { useRouter } from "next/router"

export default function DynamicPage() {
  const router = useRouter()
  const {
    query: { dynamic, id },
  } = router
  return (
    <div>
      Data: {dynamic} - {id}
    </div>
  )
}

Here, we pull out the route parameters from the query object with the useRouter hook.

That's it! Thanks for reading

Photo by Javier Allegue Barros on Unsplash

Introduction Guide to Next.js

Tue, 22 Sep 2020 10:00:00 GMT

Next.js is a React framework that ships with all the features you need for production. It gives you the best developer experience because it comes with several functionalities that would have been installed and handled on your own in a "vanilla" React app. In this guide, I will introduce you to Next.js by first explaining what Next is and why use such a tool, and then create a basic app with it.

Let's dive in.

Sorry for the interrupt!

If you're interested in learning React or Next.js in a comprehensive way, I highly recommend these bestseller courses:
> Complete Next.js with React & Node - Beautiful Portfolio App
> React - The Complete Guide (incl Hooks, React Router, Redux)

This is affiliate links, so by purchasing, you support the blog at the same time.

What is Next.js?

Next.js is a framework built with React, Node.js, Babel, and Webpack. It comes by default with handy features that are not available in a "vanilla" React App.

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Next.js allows you to export your website statically to HTML or render it on the server. It splits your code automatically, which makes your bundle size small and your app fast, because, in the end, only the JavaScript needed will be loading on the browser.

Next.js enables routing in your app by using the file-system-based routing. It will automatically use files located on the pages folder as a route, meaning that you even do not need to add an extra library to build a Multi-pages app with Next.

The Next.js framework provides a straightforward solution to build your API using API routes. You can build your entire API with GraphQL, Express, or your favorite framework and then connect it to a database using API routes. Next.js treats files under the pages/api directory as API endpoints.

Unlike React, Next has built-in support for Styled JSX, Sass, CSS modules, and more, which make Next.js app easy to style.

Creating a Next app

A Next.js app can be created manually or with Create Next App. We will go for the latter because it is the recommended way, and it will set up everything automatically for us.

So, open you your command-line interface (CLI) and run this following command:

  npx create-next-app my-app

Once the project is created, let's now explore the file structure:

File structure

├── pages
|  ├── api
|  |  └── hello.js
|  ├── index.js
|  └── _app.js
├── styles
|  ├── globals.css
|  └── Home.module.css
├── package.json
└── yarn.lock
├── README.md

As I mentioned earlier, Next.js uses the file system to enable routing in the app. Here, the index.js file is the Home page of the project. If you add a new file in the pages folder, it will be treated as a route.

Create Next App comes by default with the api folder, meaning that the hello.js file is an API endpoint. If you hit the API route http://localhost:3000/api/hello, you will get a response from the server.

Next.js uses the App component to initialize pages. The _app.js file allows you to override the default behavior of the component. If you have global styles or data that need to be sharing across your components, put them here. By the way, the underscore symbol (_) tells Next.js to not using the file as a route.

With this in place, we can now preview the project by running this command on the terminal:

  yarn dev

Or for npm

  npm run dev

Let's visit on the browser http://localhost:3000

Great! We have now finished with the introduction to Next.js. We will dive into Next.js static and dynamic routing in the next part of the series.

Thanks for reading, and see you next.

How To Use Redux in your React TypeScript App

Tue, 08 Sep 2020 18:00:00 GMT

Redux is a predictable state container for JavaScript apps. It's a popular library for managing state in React apps. It can offer better developer experience when using along with TypeScript, which is a superset of JavaScript that type-checks code to make it robust and understandable.

In this guide, I will show you how to use Redux in your React TypeScript project by building an app that allows you to add, delete, and show articles.

Sorry for the interrupt!

If you're interested in learning TypeScript, React or Redux in a comprehensive way, I highly recommend these bestseller courses:
> Understanding TypeScript - 2020 Edition
> React - The Complete Guide (incl Hooks, React Router, Redux)

This is affiliate links, so by purchasing, you support the blog at the same time.

Prerequisites
Setting up
Create the types
Create the action types
Create the action creators
Create a reducer
Create a store
Create the components

Prerequisites

This tutorial assumes that you have at least a basic understanding of React, Redux, and TypeScript. So, if you're not familiar with these technologies, try to read first this practical guide to TypeScript or this React Redux tutorial - otherwise, let's get started.

Setting up

To use Redux and TypeScript, we need to create a new React app.

To do so, let's open the CLI (command-line interface) and execute this command:

  npx create-react-app my-app --template typescript

Next, let's structure the project as follows:

├── src
|  ├── components
|  |  ├── AddArticle.tsx
|  |  └── Article.tsx
|  ├── store
|  |  ├── actionCreators.ts
|  |  ├── actionTypes.ts
|  |  └── reducer.ts
|  ├── type.d.ts
|  ├── App.test.tsx
|  ├── App.tsx
|  ├── index.css
|  ├── index.tsx
|  ├── react-app-env.d.ts
|  └── setupTests.ts
├── tsconfig.json
├── package.json
└── yarn.lock

The file structure of the project is quite simple. However, there are two things to note:

The store folder that contains files related to React Redux.
The type.d.ts file that holds the TypeScript types, which can be used now in other files without importing.

That said, we can now install Redux and create our very first store.

So, let's open the project and run the following command:

  yarn add redux react-redux redux-thunk

Or when using npm

  npm install redux react-redux redux-thunk

We also have to install their types as development dependencies to help TypeScript understanding the libraries.

So, let's execute this command again on the CLI.

  yarn add -D @types/redux @types/react-redux @types/redux-thunk

Or for npm

  npm install -D @types/redux @types/react-redux @types/redux-thunk

Great! With this step forward, we can now create the TypeScript types for the project in the next section.

Create the types

TypeScript Types allows you to set types for your variables, function parameters, and so on.

type.d.ts

interface IArticle {
  id: number
  title: string
  body: string
}

type ArticleState = {
  articles: IArticle[]
}

type ArticleAction = {
  type: string
  article: IArticle
}

type DispatchType = (args: ArticleAction) => ArticleAction

Here, we start by declaring The interface IArticle which reflects the shape of a given article. Then, we have ArticleState, ArticleAction, and DispatchType that will serve as types for respectively the state object, the action creators, and the dispatch function provided by Redux.

That said, we now have the needed types to start using React Redux. Let's create the action types.

Create the action types

store/actionTypes.ts

export const ADD_ARTICLE = "ADD_ARTICLE"
export const REMOVE_ARTICLE = "REMOVE_ARTICLE"

We need two action types for the Redux store. One for adding articles and another for deleting.

Create the action creators

store/actionCreators.ts

import * as actionTypes from "./actionTypes"

export function addArticle(article: IArticle) {
  const action: ArticleAction = {
    type: actionTypes.ADD_ARTICLE,
    article,
  }

  return simulateHttpRequest(action)
}

export function removeArticle(article: IArticle) {
  const action: ArticleAction = {
    type: actionTypes.REMOVE_ARTICLE,
    article,
  }
  return simulateHttpRequest(action)
}

export function simulateHttpRequest(action: ArticleAction) {
  return (dispatch: DispatchType) => {
    setTimeout(() => {
      dispatch(action)
    }, 500)
  }
}

In this tutorial, I will simulate the HTTP request by delaying it for 0.5 seconds. But, feel free to use a real server if you want too.

Here, the function addArticle will dispatch an action for adding a new article, and the method removeArticle will do the opposite and hence, delete the object passed in as an argument.

Create a reducer

A reducer is a pure function that receives the state of the store and an action as parameters and then returns the updated state.

store/reducer.ts

import * as actionTypes from "./actionTypes"

const initialState: ArticleState = {
  articles: [
    {
      id: 1,
      title: "post 1",
      body:
        "Quisque cursus, metus vitae pharetra Nam libero tempore, cum soluta nobis est eligendi",
    },
    {
      id: 2,
      title: "post 2",
      body:
        "Harum quidem rerum facilis est et expedita distinctio quas molestias excepturi sint",
    },
  ],
}

As you can see here, we declare an initial state to have some articles to show when the page loads. The state object needs to match the type ArticleState - otherwise, TypeScript will throw an error.

store/reducer.ts

const reducer = (
  state: ArticleState = initialState,
  action: ArticleAction
): ArticleState => {
  switch (action.type) {
    case actionTypes.ADD_ARTICLE:
      const newArticle: IArticle = {
        id: Math.random(), // not really unique
        title: action.article.title,
        body: action.article.body,
      }
      return {
        ...state,
        articles: state.articles.concat(newArticle),
      }
    case actionTypes.REMOVE_ARTICLE:
      const updatedArticles: IArticle[] = state.articles.filter(
        article => article.id !== action.article.id
      )
      return {
        ...state,
        articles: updatedArticles,
      }
  }
  return state
}

export default reducer

Next, we have the reducer function that expects the previous state and an action to be able to update the store. Here, we have two actions: one for adding and another for deleting.

With that in place, we can now handle the state with the reducer. Let's now create a store for the project.

Create a store

A Redux store is where your app's state lives.

index.tsx

import * as React from "react"
import { render } from "react-dom"
import { createStore, applyMiddleware, Store } from "redux"
import { Provider } from "react-redux"
import thunk from "redux-thunk"

import App from "./App"
import reducer from "./store/reducer"

const store: Store<ArticleState, ArticleAction> & {
  dispatch: DispatchType
} = createStore(reducer, applyMiddleware(thunk))

const rootElement = document.getElementById("root")
render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

As you can see, we import the reducer function and then pass it as an argument to the method createStore in order to create a new Redux store. The redux-thunk middleware needs to be proceeded as a second parameter as well to the method to be able to handle asynchronous code.

Next, we connect React to Redux by providing the store object as props to the Provider component.

We can now use Redux in this project and access the store. So, let's create the components to get and manipulate the data.

Create the components

components/AddArticle.tsx

import * as React from "react"

type Props = {
  saveArticle: (article: IArticle | any) => void
}

export const AddArticle: React.FC<Props> = ({ saveArticle }) => {
  const [article, setArticle] = React.useState<IArticle | {}>()

  const handleArticleData = (e: React.FormEvent<HTMLInputElement>) => {
    setArticle({
      ...article,
      [e.currentTarget.id]: e.currentTarget.value,
    })
  }

  const addNewArticle = (e: React.FormEvent) => {
    e.preventDefault()
    saveArticle(article)
  }

  return (
    <form onSubmit={addNewArticle} className="Add-article">
      <input
        type="text"
        id="title"
        placeholder="Title"
        onChange={handleArticleData}
      />
      <input
        type="text"
        id="body"
        placeholder="Description"
        onChange={handleArticleData}
      />
      <button disabled={article === undefined ? true : false}>
        Add article
      </button>
    </form>
  )
}

To add a new article, we will be using this form component. It receives the function saveArticle as a parameter, which allows adding a new article to the store. The article object should follow the type IArticle to make TypeScript happy.

components/Article.tsx

import * as React from "react"
import { Dispatch } from "redux"
import { useDispatch } from "react-redux"

type Props = {
  article: IArticle
  removeArticle: (article: IArticle) => void
}

export const Article: React.FC<Props> = ({ article, removeArticle }) => {
  const dispatch: Dispatch<any> = useDispatch()

  const deleteArticle = React.useCallback(
    (article: IArticle) => dispatch(removeArticle(article)),
    [dispatch, removeArticle]
  )

  return (
    <div className="Article">
      <div>
        <h1>{article.title}</h1>
        <p>{article.body}</p>
      </div>
      <button onClick={() => deleteArticle(article)}>Delete</button>
    </div>
  )
}

The Article component shows an article object.

The function removeArticle has to dispatch to access the store and hence delete a given article. That's the reason why we use here the useDispatch hook providing by Redux to complete the removing action.

Next, The use of useCallback helps to avoid unnecessary re-rendering by memoizing values as dependencies.

We have finally the components needed to add and show the articles. Let's now add the last piece to the puzzle by using them in the App.tsx file.

App.tsx

import * as React from "react"
import { useSelector, shallowEqual, useDispatch } from "react-redux"
import "./styles.css"

import { Article } from "./components/Article"
import { AddArticle } from "./components/AddArticle"
import { addArticle, removeArticle } from "./store/actionCreators"
import { Dispatch } from "redux"

const App: React.FC = () => {
  const articles: readonly IArticle[] = useSelector(
    (state: ArticleState) => state.articles,
    shallowEqual
  )

  const dispatch: Dispatch<any> = useDispatch()

  const saveArticle = React.useCallback(
    (article: IArticle) => dispatch(addArticle(article)),
    [dispatch]
  )

  return (
    <main>
      <h1>My Articles</h1>
      <AddArticle saveArticle={saveArticle} />
      {articles.map((article: IArticle) => (
        <Article
          key={article.id}
          article={article}
          removeArticle={removeArticle}
        />
      ))}
    </main>
  )
}

export default App

The useSelector hook enables access to the state of the store. Here, we pass shallowEqual as a second argument to the method to tell to Redux to use shallow equality when checking for changes.

Next, we rely on useDispatch to dispatch an action for adding articles in the store. Finally, we loop through the array of articles and pass each to the Article component to show it.

With that, we can now browse to the root of the project and then execute this command.

  yarn start

Or for npm

  npm start

If you open http://localhost:3000/ in the browser, you should see this:

Great! Our app looks good. With this, we have now finished using Redux in a React TypeScript app.

You can find the finished project in this CodeSandbox

Thanks for reading.

The React TypeScript Cheatsheet – How To Set Up Types on Hooks

Tue, 04 Aug 2020 18:30:00 GMT

TypeScript is a great language that allows type-checking your code in order to make it more robust and understandable.

In this guide, I will lead you in setting up TypeScript types on React hooks (useState, useContext, useCallback, and so on).

Sorry for the interrupt!

If you're interested in learning TypeScript or React in a comprehensive way, I highly recommend these bestseller courses:
> Understanding TypeScript - 2020 Edition
> React - The Complete Guide (incl Hooks, React Router, Redux)

This is affiliate links, so by purchasing, you support the blog at the same time.

Let's dive in

Set types on useState
Set types on useRef
Set types on useContext
Set types on useReducer
Set types on useMemo
Set types on useCallback

Set types on useState

The useState hook allows you to manage state in your React app. It's the equivalent of this.state in a Class component.

import * as React from "react"

export const App: React.FC = () => {
  const [counter, setCounter] = React.useState<number>(0)

  return (
    <div className="App">
      <h1>Result: {counter}</h1>
      <button onClick={() => setCounter(counter + 1)}>+</button>
      <button onClick={() => setCounter(counter - 1)}>-</button>
    </div>
  )
}

To set types on useState hook, you need to pass into <> the type of the state. You can also use union type like this <number | null> if you don't have an initial state.

Set types on useRef

The useRef hook returns a mutable ref object that allows accessing DOM elements.

import * as React from "react"

export const App: React.FC = () => {
  const myRef = React.useRef<HTMLElement | null>(null)

  return (
    <main className="App" ref={myRef}>
      <h1>My title</h1>
    </main>
  )
}

As you can see, the way useRef receives types is the same as the useState hook. You just have to pass it into the <> - and, if you have multiple type annotations, just use union type as I do here.

Set types on useContext

useContext is a hook that allows accessing and consuming a given Context in a React app.

import * as React from "react"

interface IArticle {
  id: number
  title: string
}

const ArticleContext = React.createContext<IArticle[] | []>([])

const ArticleProvider: React.FC<React.ReactNode> = ({ children }) => {
  const [articles, setArticles] = React.useState<IArticle[] | []>([
    { id: 1, title: "post 1" },
    { id: 2, title: "post 2" },
  ])

  return (
    <ArticleContext.Provider value={{ articles }}>
      {children}
    </ArticleContext.Provider>
  )
}

const ShowArticles: React.FC = () => {
  const { articles } = React.useContext<IArticle[]>(ArticleContext)

  return (
    <div>
      {articles.map((article: IArticle) => (
        <p key={article.id}>{article.title}</p>
      ))}
    </div>
  )
}

export const App: React.FC = () => {
  return (
    <ArticleProvider>
      <h1>My title</h1>
      <ShowArticles />
    </ArticleProvider>
  )
}

Here, we start by creating the IArticle interface that is the type of our context. Next, we use it on the createContext() method to create a new context, and then initialize it with [] - you can also use null as an initial state if you want too.

With that in place, we can now handle the state of the context and set the type on useContext in order to expect an array of type IArticle as value.

Set types on useReducer

The useReducer hook helps to manage more complex states. It's an alternative to useState - but keep in mind that they are different.

import * as React from "react"

enum ActionType {
  INCREMENT_COUNTER = "INCREMENT_COUNTER",
  DECREMENT_COUNTER = "DECREMENT_COUNTER",
}

interface IReducer {
  type: ActionType
  count: number
}

interface ICounter {
  result: number
}

const initialState: ICounter = {
  result: 0,
}

const countValue: number = 1

const reducer: React.Reducer<ICounter, IReducer> = (state, action) => {
  switch (action.type) {
    case ActionType.INCREMENT_COUNTER:
      return { result: state.result + action.count }
    case ActionType.DECREMENT_COUNTER:
      return { result: state.result - action.count }
    default:
      return state
  }
}

export default function App() {
  const [state, dispatch] = React.useReducer<React.Reducer<ICounter, IReducer>>(
    reducer,
    initialState
  )

  return (
    <div className="App">
      <h1>Result: {state.result}</h1>
      <button
        onClick={() =>
          dispatch({ type: ActionType.INCREMENT_COUNTER, count: countValue })
        }
      >
        {" "}
        +
      </button>
      <button
        onClick={() =>
          dispatch({ type: ActionType.DECREMENT_COUNTER, count: countValue })
        }
      >
        {" "}
        -
      </button>
    </div>
  )
}

Here, we start by declaring the action types that allow handling the counter. Next, we set respectively two types for the reducer function and the counter state.

The reducer expects a state of type ICounter and an action of type IReducer. With that, the counter can now be handle consequently.

The useReducer hook receives the reducer function and an initial state as arguments and returns two elements: the state of the counter and the dispatch action.

To set the type for the values returned by ueReducer - just pass into the <> the type of your data.

With that in place, the counter can now be incremented or decremented through useReducer.

Set types on useMemo

The useMemo hook allows you to memorize the output of a given function. It returns a memoized value.

const memoizedValue = React.useMemo<string>(() => {
  computeExpensiveValue(a, b)
}, [a, b])

To set types on useMemo - just pass into the <> the type of data you want to memorize. Here, the hook expects a string as a returned value.

Set types on useCallback

The useCallback hook allows you to memorize a function to prevent unnecessary re-renders. It returns a memoized callback.

type CallbackType = (...args: string[]) => void

const memoizedCallback = React.useCallback<CallbackType>(() => {
  doSomething(a, b)
}, [a, b])

Here, we declare the CallbackType type that is using as type on the callback we want to memorize. It expects to receive parameters of type string and should return a value of type void.

Next, we set that type on useCallback - and if you pass a wrong type to the callback or the array of dependencies - TypeScript will yell at you.

Thanks for reading

How To Build a Todo App with React, TypeScript, NodeJS, and MongoDB

Tue, 21 Jul 2020 17:45:00 GMT

In this tutorial, we will be using TypeScript on both sides (server and client) to build a Todo App from scratch with React, NodeJS, Express, and MongoDB.

So, let's start by planning the API.

API with NodeJS, Express, MongoDB and TypeScript
Client-side with React and TypeScript
Resources

Sorry for the interrupt!

If you're interested in learning TypeScript, React or Node in a comprehensive way, I highly recommend these bestseller courses:
> Understanding TypeScript - 2020 Edition
> NodeJS - The Complete Guide (incl. Deno, REST APIs, GraphQL)
> React - The Complete Guide (incl Hooks, React Router, Redux)

This is affiliate links, so by purchasing, you support the blog at the same time.

Let's dive in

API with NodeJS, Express, MongoDB and TypeScript

Setting up

If you're new to this, you can start with A Practical Guide to TypeScript or How to build an API from scratch with Node JS, Express, and MongoDB to get most out of this tutorial - otherwise, let's get started.

To create a new NodeJS App, you need to run this command on the terminal.

  yarn init

It will ask for a couple of questions and then initialize the app. You can skip it by adding a -y flag to the command.

Next, structure the project as follows.

├── dist
├── node_modules
├── src
   ├── app.ts
   ├── controllers
   |  └── todos
   |     └── index.ts
   ├── models
   |  └── todo.ts
   ├── routes
   |  └── index.ts
   └── types
      └── todo.ts
├── nodemon.json
├── package.json
├── tsconfig.json

As you can see, this file structure is relatively simple. The dist directory will serve as an output folder once the code compiled to plain JavaScript. We also have an app.ts file that is the entry point of the server. The controllers, types, and routes are also in their respective folder names.

Now, we need to configure the tsconfig.json file to help the compiler along following our preferences.

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist/js",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["src/types/*.ts", "node_modules", ".vscode"]
}

Here we have four main properties to underline:

outDir: It tells the compiler to put the compiled code into the dist/js folder.
rootDir: It informs TypeScript to compile every .ts file located in the src folder.
include: It tells the compiler to include files that are in the src directory and sub-directory.
exclude: It will exclude the files or folders passed in the array during compile-time.

We can now install the dependencies to enable TypeScript in the project. Because by default, this app will use JavaScript.

There are two ways of using TypeScript in a NodeJS app. Either locally in the project or globally in our machine. I will go for the latter for personal preference, but you can stick with the local way if you want too.

Now, let's execute the following command on the terminal to install TypeScript.

  yarn add typescript -g

This g flag allows installing TypeScript globally and hence make it accessible from anywhere on the computer.

Next, let's add some dependencies in order to use Express and MongoDB.

  yarn add express cors mongoose

We also need to install their types as development dependencies to help the TypeScript compiler understanding the packages.

  yarn add -D @types/node @types/express @types/mongoose @types/cors

Now, TypeScript won't yell at you anymore - it will use these types to define the libraries we've just installed.

We also need to add other dependencies to be able to compile the TypeScript code and start the server concurrently.

  yarn add -D concurrently nodemon

With that in place, we can now update the package.json file with the scripts needed to start the server.

package.json

  "scripts": {
    "build": "tsc",
    "start": "concurrently \"tsc -w\" \"nodemon dist/js/app.js\""
  }

concurrently will help to compile the TypeScript code, keep watching for changes, and also start the server simultaneously. That said, we can now launch the server - however, we have not created something meaningful yet in that regard. So, let's fix that in the next section.

Create a Todo Type

types/todo.ts

import { Document } from "mongoose"

export interface ITodo extends Document {
  name: string
  description: string
  status: boolean
}

Here, we have a Todo interface that extends the Document type provided by mongoose that will be using later to interact with MongoDB. That said, we can now define how a Todo model should look.

Create a Todo Model

models/todo.ts

import { ITodo } from "./../types/todo"
import { model, Schema } from "mongoose"

const todoSchema: Schema = new Schema(
  {
    name: {
      type: String,
      required: true,
    },

    description: {
      type: String,
      required: true,
    },

    status: {
      type: Boolean,
      required: true,
    },
  },
  { timestamps: true }
)

export default model<ITodo>("Todo", todoSchema)

As you can see here, we start by importing the interface ITodo and some utilities from mongoose. The latter helps to define the Todo schema and also pass in ITodo as a type to the model before exporting it.

With that, we can now use the Todo model in other files to interact with the database.

Create API controllers

Get, Add, Update and Delete Todos

controllers/todos/index.ts

import { Response, Request } from "express"
import { ITodo } from "./../../types/todo"
import Todo from "../../models/todo"

const getTodos = async (req: Request, res: Response): Promise<void> => {
  try {
    const todos: ITodo[] = await Todo.find()
    res.status(200).json({ todos })
  } catch (error) {
    throw error
  }
}

Here, we first need to import some types from express because I want to type the values explicitly. If you want too, you can let TypeScript infers it for you.

Next, we use the function getTodos() to fetch data. It receives a req and res parameters and returns a promise.

And with the help of the Todo model created earlier, we can now get data from MongoDB and returns a response with the array of todos.

controllers/todos/index.ts

const addTodo = async (req: Request, res: Response): Promise<void> => {
  try {
    const body = req.body as Pick<ITodo, "name" | "description" | "status">

    const todo: ITodo = new Todo({
      name: body.name,
      description: body.description,
      status: body.status,
    })

    const newTodo: ITodo = await todo.save()
    const allTodos: ITodo[] = await Todo.find()

    res
      .status(201)
      .json({ message: "Todo added", todo: newTodo, todos: allTodos })
  } catch (error) {
    throw error
  }
}

As you can see, the function addTodo() receives the body object that contains data entered by the user.

Next, I use typecasting to avoid typos and restrict the body variable to match ITodo and then create a new Todo based on the model.

With that in place, we can now save the Todo in the DB and return a response that contains the todo created and the updated todos array.

controllers/todos/index.ts

const updateTodo = async (req: Request, res: Response): Promise<void> => {
  try {
    const {
      params: { id },
      body,
    } = req
    const updateTodo: ITodo | null = await Todo.findByIdAndUpdate(
      { _id: id },
      body
    )
    const allTodos: ITodo[] = await Todo.find()
    res.status(200).json({
      message: "Todo updated",
      todo: updateTodo,
      todos: allTodos,
    })
  } catch (error) {
    throw error
  }
}

To update a todo, we need to extract the id and the body from the req object and then pass them to findByIdAndUpdate(). This utility will find the Todo on the database and update it. And once the operation completed, we can now return the updated data to the user.

controllers/todos/index.ts

const deleteTodo = async (req: Request, res: Response): Promise<void> => {
  try {
    const deletedTodo: ITodo | null = await Todo.findByIdAndRemove(
      req.params.id
    )
    const allTodos: ITodo[] = await Todo.find()
    res.status(200).json({
      message: "Todo deleted",
      todo: deletedTodo,
      todos: allTodos,
    })
  } catch (error) {
    throw error
  }
}

export { getTodos, addTodo, updateTodo, deleteTodo }

The function deleteTodo() allows deleting a Todo from the database. Here, we pull out the id from req and pass it as an argument to findByIdAndRemove() to access the corresponding Todo and delete it from the DB.

Next, we export the functions to be able to use them in other files. That said, we can now create some routes for the API and use these methods to handle the requests.

Create API routes

routes/index.ts

import { Router } from "express"
import { getTodos, addTodo, updateTodo, deleteTodo } from "../controllers/todos"

const router: Router = Router()

router.get("/todos", getTodos)

router.post("/add-todo", addTodo)

router.put("/edit-todo/:id", updateTodo)

router.delete("/delete-todo/:id", deleteTodo)

export default router

As you can notice here, we have four routes to get, add, update, and delete todos from the database. And since we already created the functions, the only thing we have to do is importing the methods and pass them as parameters to handle the requests.

So far, we have covered a lot, but still, no server to start. So, let's fix that in the next section.

Create a Server

Before creating the server, we need to first add some environment variables that will hold the MongoDB credentials in the nodemon.json file.

nodemon.json

{
    "env": {
        "MONGO_USER": "your-username",
        "MONGO_PASSWORD": "your-password",
        "MONGO_DB": "your-db-name"
    }
}

You can get the credentials by creating a new cluster on MongoDB Atlas.

app.ts

import express, { Express } from "express"
import mongoose from "mongoose"
import cors from "cors"
import todoRoutes from "./routes"

const app: Express = express()

const PORT: string | number = process.env.PORT || 4000

app.use(cors())
app.use(todoRoutes)

const uri: string = `mongodb+srv://${process.env.MONGO_USER}:${process.env.MONGO_PASSWORD}@clustertodo.raz9g.mongodb.net/${process.env.MONGO_DB}?retryWrites=true&w=majority`
const options = { useNewUrlParser: true, useUnifiedTopology: true }
mongoose.set("useFindAndModify", false)

mongoose
  .connect(uri, options)
  .then(() =>
    app.listen(PORT, () =>
      console.log(`Server running on http://localhost:${PORT}`)
    )
  )
  .catch(error => {
    throw error
  })

Here, we start by importing the express library that allows us to access the use() method that helps to handle the Todos routes.

Next, we use the mongoose package to connect to MongoDB by appending to the URL the credentials held on the nodemon.json file.

That said, now, if we connect successfully to MongoDB, the server will start, if appropriate, an error will be throwing.

We've now done building the API with Node, Express, TypeScript, and MongoDB. Let's now start building the client-side app with React and TypeScript.

Client-side with React and TypeScript

Setting up

To create a new React app, I will go with Create React App - you can use other methods as well if you want too.

So, let's run in the terminal the following command.

  npx create-react-app my-app --template typescript

Next, install the Axios library to be able to fetch remote data.

  yarn add axios

Once the installation completed, let's structure our project as follows.

├── node_modules
├── public
├── src
|  ├── API.ts
|  ├── App.test.tsx
|  ├── App.tsx
|  ├── components
|  |  ├── AddTodo.tsx
|  |  └── TodoItem.tsx
|  ├── index.css
|  ├── index.tsx
|  ├── react-app-env.d.ts
|  ├── setupTests.ts
|  └── type.d.ts
├── tsconfig.json
├── package.json
└── yarn.lock

Here, we have a relatively simple file structure. The main thing to notice is src/type.d.ts that will hold the types. And since I will use them on almost every file, I added the extension .d.ts to make the types globally available. And now we don't need to import them anymore.

Create a Todo Type

src/type.d.ts

interface ITodo {
  _id: string
  name: string
  description: string
  status: boolean
  createdAt?: string
  updatedAt?: string
}

interface TodoProps {
  todo: ITodo
}

type ApiDataType = {
  message: string
  status: string
  todos: ITodo[]
  todo?: ITodo
}

Here, the ITodo interface needs to mirror the shape of data from the API. And since we don't have mongoose here, we need to add additional properties to match the type defined on the API. Next, we use that same interface for the TodoProps which is the type annotation for the props that will be received by the component responsible for rendering the data.

We have now defined our types - let's now start to fetching data from the API.

Fetch data from the API

src/API.ts

import axios, { AxiosResponse } from "axios"

const baseUrl: string = "http://localhost:4000"

export const getTodos = async (): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const todos: AxiosResponse<ApiDataType> = await axios.get(
      baseUrl + "/todos"
    )
    return todos
  } catch (error) {
    throw new Error(error)
  }
}

As you can see, we need to import axios to request data from the API. Next, we use the function getTodos() to get data from the server. It will return a promise of type AxiosResponse that holds the Todos fetched that needs to match the type ApiDataType.

src/API.ts

export const addTodo = async (
  formData: ITodo
): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const todo: Omit<ITodo, "_id"> = {
      name: formData.name,
      description: formData.description,
      status: false,
    }
    const saveTodo: AxiosResponse<ApiDataType> = await axios.post(
      baseUrl + "/add-todo",
      todo
    )
    return saveTodo
  } catch (error) {
    throw new Error(error)
  }
}

This function receives the data entered by the user as an argument and returns a promise. Here, we need to omit the _id property because MongoDB will create it on the fly.

src/API.ts

export const updateTodo = async (
  todo: ITodo
): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const todoUpdate: Pick<ITodo, "status"> = {
      status: true,
    }
    const updatedTodo: AxiosResponse<ApiDataType> = await axios.put(
      `${baseUrl}/edit-todo/${todo._id}`,
      todoUpdate
    )
    return updatedTodo
  } catch (error) {
    throw new Error(error)
  }
}

To update a Todo, we have to pass in the updated data and the _id of the object. Here, we need to change the status of the Todo, which is why I only pick the property we need before sending the request to the server.

src/API.ts

export const deleteTodo = async (
  _id: string
): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const deletedTodo: AxiosResponse<ApiDataType> = await axios.delete(
      `${baseUrl}/delete-todo/${_id}`
    )
    return deletedTodo
  } catch (error) {
    throw new Error(error)
  }
}

Here, we also have a function that receives as a parameter the _id property and returns a promise.

With that in place, we can now go to the components folder and add some meaningful code to its files.

Create the components

Add Todo Form

components/AddTodo.tsx

import React, { useState } from "react"

type Props = {
  saveTodo: (e: React.FormEvent, formData: ITodo | any) => void
}

const AddTodo: React.FC<Props> = ({ saveTodo }) => {
  const [formData, setFormData] = useState<ITodo | {}>()

  const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
    setFormData({
      ...formData,
      [e.currentTarget.id]: e.currentTarget.value,
    })
  }

  return (
    <form className="Form" onSubmit={e => saveTodo(e, formData)}>
      <div>
        <div>
          <label htmlFor="name">Name</label>
          <input onChange={handleForm} type="text" id="name" />
        </div>
        <div>
          <label htmlFor="description">Description</label>
          <input onChange={handleForm} type="text" id="description" />
        </div>
      </div>
      <button disabled={formData === undefined ? true : false}>Add Todo</button>
    </form>
  )
}

export default AddTodo

As you can see, here we have a functional component of type React.FC (FC stands for functional component). It receives as a prop the method saveTodo() that allow saving data to the DB.

Next, we have a formData state that needs to match the ITodo type to satisfy the compiler, that is why we pass it to useState hook. We also need to add an alternative type ({}) because the initial state will be an empty object.

And with that, we can now move forward and display the data fetched.

Display a Todo

components/TodoItem.tsx

import React from "react"

type Props = TodoProps & {
  updateTodo: (todo: ITodo) => void
  deleteTodo: (_id: string) => void
}

const Todo: React.FC<Props> = ({ todo, updateTodo, deleteTodo }) => {
  const checkTodo: string = todo.status ? `line-through` : ""
  return (
    <div className="Card">
      <div className="Card--text">
        <h1 className={checkTodo}>{todo.name}</h1>
        <span className={checkTodo}>{todo.description}</span>
      </div>
      <div className="Card--button">
        <button
          onClick={() => updateTodo(todo)}
          className={todo.status ? `hide-button` : "Card--button__done"}
        >
          Complete
        </button>
        <button
          onClick={() => deleteTodo(todo._id)}
          className="Card--button__delete"
        >
          Delete
        </button>
      </div>
    </div>
  )
}

export default Todo

Here, we need to extend the TodoProps type and append the functions updateTodo and deleteTodo to handle appropriately the props received by the component.

Now, once the Todo object passed in, we will be able to display it and add the functions needed to update or delete a Todo.

Great! we can now go to the App.tsx file and add the last piece to the puzzle.

Fetch and Display data

App.tsx

import React, { useEffect, useState } from 'react'
import TodoItem from './components/TodoItem'
import AddTodo from './components/AddTodo'
import { getTodos, addTodo, updateTodo, deleteTodo } from './API'

const App: React.FC = () => {
  const [todos, setTodos] = useState<ITodo[]>([])

  useEffect(() => {
    fetchTodos()
  }, [])

  const fetchTodos = (): void => {
    getTodos()
    .then(({ data: { todos } }: ITodo[] | any) => setTodos(todos))
    .catch((err: Error) => console.log(err))
  }

Here, we first need to import the components and utility functions held on API.ts. Next, we pass to useState an array of type ITodo and initialize it with an empty array.

The method getTodos() returns a promise - therefore, we can access the then function and update the state with the data fetched or throw an error if any occurs.

With that in place, we can now call the function fetchTodos() when the component is successfully mounted.

App.tsx

const handleSaveTodo = (e: React.FormEvent, formData: ITodo): void => {
  e.preventDefault()
  addTodo(formData)
    .then(({ status, data }) => {
      if (status !== 201) {
        throw new Error("Error! Todo not saved")
      }
      setTodos(data.todos)
    })
    .catch(err => console.log(err))
}

Once the form submitted, we use addTodo() to send the request to the server, and then if the Todo has successfully saved, we update the data otherwise an error will be thrown.

App.tsx

const handleUpdateTodo = (todo: ITodo): void => {
  updateTodo(todo)
    .then(({ status, data }) => {
      if (status !== 200) {
        throw new Error("Error! Todo not updated")
      }
      setTodos(data.todos)
    })
    .catch(err => console.log(err))
}

const handleDeleteTodo = (_id: string): void => {
  deleteTodo(_id)
    .then(({ status, data }) => {
      if (status !== 200) {
        throw new Error("Error! Todo not deleted")
      }
      setTodos(data.todos)
    })
    .catch(err => console.log(err))
}

The functions to update or delete a Todo are quite similar. They both receive a parameter, send the request, and get back a response. And then, they check if the request has been successful and handle it consequently.

App.tsx

  return (
    <main className='App'>
      <h1>My Todos</h1>
      <AddTodo saveTodo={handleSaveTodo} />
      {todos.map((todo: ITodo) => (
        <TodoItem
          key={todo._id}
          updateTodo={handleUpdateTodo}
          deleteTodo={handleDeleteTodo}
          todo={todo}
        />
      ))}
    </main>
  )
}

export default App

Here, we loop through the todos array and then pass to the TodoItem the expected data.

Now, if you browse on the folder that contains the server-side app - and executes the following command in the terminal.

yarn start

And also on the client-side app:

yarn start

You should see that our Todo app works as expected.

Great! With that final touch, we have now done building a Todo App using TypeScript, React, NodeJs, Express, and MongoDB.

You can find the Source Code here

Thanks for reading.

Resources

React TypeScript Cheatsheet

Advanced TypeScript Types cheatsheet (with examples)

TypeScript Cheatsheets

Advanced TypeScript Types cheat sheet (with examples)

Mon, 15 Jun 2020 17:05:00 GMT

TypeScript is a typed language that allows you to specify the type of variables, function parameters, returned values, and object properties.

Here an advanced TypeScript Types cheat sheet with examples.

Sorry for the interrupt!

If you're interested in learning TypeScript in a comprehensive way, I highly recommend this bestseller course: Understanding TypeScript - 2020 Edition

It's an affiliate link, so by purchasing, you support the blog at the same time.

Let's dive in

Intersection Types
Union Types
Generic Types
Utility Types
- Partial
- Required
- Readonly
- Pick
- Omit
- Extract
- Exclude
- Record
- NonNullable
Mapped types
Type Guards
Conditional Types

Intersection Types

An intersection type is a way of combining multiple types into one. Meaning that you can merge a given type A with a type B or more and get back a single type with all properties.

type LeftType = {
  id: number
  left: string
}

type RightType = {
  id: number
  right: string
}

type IntersectionType = LeftType & RightType

function showType(args: IntersectionType) {
  console.log(args)
}

showType({ id: 1, left: "test", right: "test" })
// Output: {id: 1, left: "test", right: "test"}

As you can see, IntersectionType combines two types - LeftType and RightType and use the & sign to construct the intersection type.

Union Types

Union types allow you to have different types annotation within a given variable.

type UnionType = string | number

function showType(arg: UnionType) {
  console.log(arg)
}

showType("test")
// Output: test

showType(7)
// Output: 7

The function showType is a union type that accepts both strings and numbers as a parameter.

Generic Types

A generic type is a way of reusing part of a given type. It helps to capture the type T passed in as a parameter.

function showType<T>(args: T) {
  console.log(args)
}

showType("test")
// Output: "test"

showType(1)
// Output: 1

To construct a generic type, you need to use the brackets and pass T as a parameter. Here, I use T (the name is up to you) and then, call the function showType twice with different type annotations because it's generic - it can be reused.

interface GenericType<T> {
  id: number
  name: T
}

function showType(args: GenericType<string>) {
  console.log(args)
}

showType({ id: 1, name: "test" })
// Output: {id: 1, name: "test"}

function showTypeTwo(args: GenericType<number>) {
  console.log(args)
}

showTypeTwo({ id: 1, name: 4 })
// Output: {id: 1, name: 4}

Here, we have another example that has an interface GenericType which receives a generic type T. And since it's reusable, we can call it with first a string, and then a number.

interface GenericType<T, U> {
  id: T
  name: U
}

function showType(args: GenericType<number, string>) {
  console.log(args)
}

showType({ id: 1, name: "test" })
// Output: {id: 1, name: "test"}

function showTypeTwo(args: GenericType<string, string[]>) {
  console.log(args)
}

showTypeTwo({ id: "001", name: ["This", "is", "a", "Test"] })
// Output: {id: "001", name: Array["This", "is", "a", "Test"]}

A generic type can receive several arguments. Here, we pass in two parameters: T and U, and then use them as type annotations for the properties. That said, we can now use the interface and provide different types as argument.

Utility Types

TypeScript provides handy built-in utilities that help to manipulate types easily. To use them, you need to pass into the <> the type you want to transform.

Partial

Partial<T>

Partial allows you to make all properties of the type T optional. It will add a ? mark next to every field.

interface PartialType {
  id: number
  firstName: string
  lastName: string
}

function showType(args: Partial<PartialType>) {
  console.log(args)
}

showType({ id: 1 })
// Output: {id: 1}

showType({ firstName: "John", lastName: "Doe" })
// Output: {firstName: "John", lastName: "Doe"}

As you can see, we have an interface PartialType which is used as type annotation for the parameters received by the function showType(). And to make the properties optional, we have to use the Partial keyword and pass in the type PartialType as an argument. That said, now all fields become optional.

Required

Required<T>

Unlike Partial, the Required utility makes all properties of the type T required.

interface RequiredType {
  id: number
  firstName?: string
  lastName?: string
}

function showType(args: Required<RequiredType>) {
  console.log(args)
}

showType({ id: 1, firstName: "John", lastName: "Doe" })
// Output: { id: 1, firstName: "John", lastName: "Doe" }

showType({ id: 1 })
// Error: Type '{ id: number: }' is missing the following properties from type 'Required<RequiredType>': firstName, lastName

The Required utility will make all properties required even if we make them optional first before using the utility. And if a property is omitted, TypeScript will throw an error.

Readonly

Readonly<T>

This utility type will transform all properties of the type T in order to make them not reassignable with a new value.

interface ReadonlyType {
  id: number
  name: string
}

function showType(args: Readonly<ReadonlyType>) {
  args.id = 4
  console.log(args)
}

showType({ id: 1, name: "Doe" })
// Error: Cannot assign to 'id' because it is a read-only property.

Here, we use the utility Readonly to make the properties of ReadonlyType not reassignable. That said, if you try to give a new value to one of these fields, an error will be thrown.

Besides that, you can also use the keyword readonly in front of a property to make it not reassignable.

interface ReadonlyType {
  readonly id: number
  name: string
}

Pick

Pick<T, K>

It allows you to create a new type from an existing model T by selecting some properties K of that type.

interface PickType {
  id: number
  firstName: string
  lastName: string
}

function showType(args: Pick<PickType, "firstName" | "lastName">) {
  console.log(args)
}

showType({ firstName: "John", lastName: "Doe" })
// Output: {firstName: "John"}

showType({ id: 3 })
// Error: Object literal may only specify known properties, and 'id' does not exist in type 'Pick<PickType, "firstName" | "lastName">'

Pick is a bit different from the previous utilities we have already seen. It expects two parameters - T is the type you want to pick elements from and K which is the property you want to select. You can also pick multiple fields by separating them with a pipe(|) symbol.

Omit

Omit<T, K>

The Omit utility is the opposite of the Pick type. And instead of selecting elements, it will remove K properties from the type T.

interface PickType {
  id: number
  firstName: string
  lastName: string
}

function showType(args: Omit<PickType, "firstName" | "lastName">) {
  console.log(args)
}

showType({ id: 7 })
// Output: {id: 7}

showType({ firstName: "John" })
// Error: Object literal may only specify known properties, and 'firstName' does not exist in type 'Pick<PickType, "id">'

This utility is similar to the way Pick works. It expects the type and the properties to omit from that type.

Extract

Extract<T, U>

Extract allows you to construct a type by picking properties that are present in two different types. The utility will extract from T all properties that are assignable to U.

interface FirstType {
  id: number
  firstName: string
  lastName: string
}

interface SecondType {
  id: number
  address: string
  city: string
}

type ExtractType = Extract<keyof FirstType, keyof SecondType>
// Output: "id"

Here, we have two types that have in common the property id. And hence by using the Extract keyword, we get back the field id since it's present in both interfaces. And if you have more than one shared field, the utility will extract all similar properties.

Exclude

Unlike Extract, the Exclude utility will construct a type by excluding properties that are already present in two different types. It excludes from T all fields that are assignable to U.

interface FirstType {
  id: number
  firstName: string
  lastName: string
}

interface SecondType {
  id: number
  address: string
  city: string
}

type ExcludeType = Exclude<keyof FirstType, keyof SecondType>

// Output; "firstName" | "lastName"

As you can see here, the properties firstName and lastName are assignable to the SecondType type since they are not present there. And by using the Extract keyword, we get back these fields as expected.

Record

Record<K,T>

This utility helps you to construct a type with a set of properties K of a given type T. Record is really handy when it comes to mapping the properties of a type to another one.

interface EmployeeType {
  id: number
  fullname: string
  role: string
}

let employees: Record<number, EmployeeType> = {
  0: { id: 1, fullname: "John Doe", role: "Designer" },
  1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
  2: { id: 3, fullname: "Sara Duckson", role: "Developer" },
}

// 0: { id: 1, fullname: "John Doe", role: "Designer" },
// 1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
// 2: { id: 3, fullname: "Sara Duckson", role: "Developer" }

The way Record works is relatively simple. Here, it expects a number as a type which is why we have 0, 1, and 2 as keys for the employees variable. And if you try to use a string as a property, an error will be thrown. Next, the set of properties is given by EmployeeType hence the object with the fields id, fullName, and role.

NonNullable

NonNullable<T>

It allows you to remove null and undefined from the type T.

type NonNullableType = string | number | null | undefined

function showType(args: NonNullable<NonNullableType>) {
  console.log(args)
}

showType("test")
// Output: "test"

showType(1)
// Output: 1

showType(null)
// Error: Argument of type 'null' is not assignable to parameter of type 'string | number'.

showType(undefined)
// Error: Argument of type 'undefined' is not assignable to parameter of type 'string | number'.

Here, we pass the type NonNullableType as an argument to the NonNullable utility which constructs a new type by excluding null and undefined from that type. That said, if you pass a nullable value, TypeScript will throw an error.

By the way, if you add the --strictNullChecks flag to the tsconfig file, TypeScript will apply non-nullability rules.

Mapped types

Mapped types allow you to take an existing model and transform each of its properties into a new type. Note that some utility types covered earlier are also mapped types.

type StringMap<T> = {
  [P in keyof T]: string
}

function showType(arg: StringMap<{ id: number; name: string }>) {
  console.log(arg)
}

showType({ id: 1, name: "Test" })
// Error: Type 'number' is not assignable to type 'string'.

showType({ id: "testId", name: "This is a Test" })
// Output: {id: "testId", name: "This is a Test"}

StringMap<> will transform whatever types that passed in into a string. That said, if we use it in the function showType(), the parameters received must be a string - otherwise, an error will be thrown by TypeScript.

Type Guards

Type Guards allow you to check the type of a variable or an object with an operator. It's a conditional block that returns a type using typeof, instanceof, or in.

typeof

function showType(x: number | string) {
  if (typeof x === "number") {
    return `The result is ${x + x}`
  }
  throw new Error(`This operation can't be done on a ${typeof x}`)
}

showType("I'm not a number")
// Error: This operation can't be done on a string

showType(7)
// Output: The result is 14

As you can see, we have a normal JavaScript conditional block that checks the type of the argument received with typeof. With that in place, you can now guard your type with this condition.

instanceof

class Foo {
  bar() {
    return "Hello World"
  }
}

class Bar {
  baz = "123"
}

function showType(arg: Foo | Bar) {
  if (arg instanceof Foo) {
    console.log(arg.bar())
    return arg.bar()
  }

  throw new Error("The type is not supported")
}

showType(new Foo())
// Output: Hello World

showType(new Bar())
// Error: The type is not supported

Like the previous example, this one is also a type guard that checks if the parameter received is part of the Foo class or not and handles it consequently.

in

interface FirstType {
  x: number
}
interface SecondType {
  y: string
}

function showType(arg: FirstType | SecondType) {
  if ("x" in arg) {
    console.log(`The property ${arg.x} exists`)
    return `The property ${arg.x} exists`
  }
  throw new Error("This type is not expected")
}

showType({ x: 7 })
// Output: The property 7 exists

showType({ y: "ccc" })
// Error: This type is not expected

The in operator allows you to check whether a property x exists or not on the object received as a parameter.

Conditional Types

It tests two types and selects one of them depending on the outcome of that test.

type NonNullable<T> = T extends null | undefined ? never : T

This example of the NonNullable utility type checks if the type is null or not and handle it depending on that. And as you can note, it uses the JavaScript ternary operator.

Thanks for reading.

A Practical Guide to TypeScript - How to Build a Pokedex app using HTML, CSS, and TypeScript

Thu, 21 May 2020 14:28:00 GMT

TypeScript is a superset that needs to compile to plain JavaScript. It offers more control over your code since it uses type annotations, interfaces, classes, and static type checking to throw errors at compile-time. TypeScript helps to enhance code quality and understandability, especially with a large codebase.

In this guide, I will lead you through TypeScript by learning first all the basics needed to start with this great language, and then finish up this article by building an app from scratch using HTML, CSS, and TypeScript.

Let's dive in

Sorry for the interrupt!

If you're interested in learning TypeScript in a comprehensive way, I highly recommend this bestseller course: Understanding TypeScript - 2020 Edition

It's an affiliate link, so by purchasing, you support the blog at the same time.

What is TypeScript?
Setting up TypeScript
Configuring TypeScript with tsconfig
TypeScript Types
- Basic TypeScript Types
- Interfaces and Type aliases
Build a Pokedex app using TypeScript
- Markup
- Fetch and display data using TypeScript
Compile TypeScript to JavaScript
Resources

What is TypeScript?

TypeScript is an object-oriented programming language developed and maintained by Microsoft. It's a superset of JavaScript, meaning that any valid JavaScript code will also run as expected in TypeScript. It has all of the functionality of JavaScript and some additional features. It needs to be compiled to plain JavaScript during runtime, therefore a compiler is needed to get back the JS Code.

TypeScript uses static typing, meaning that you can give a type to a variable during declaration. And it's something that can't be done with JavaScript because it's a dynamically typed language, it does not know the data type of a variable until it assigns a value to that variable at runtime.

Static type checking makes TypeScript great because it helps to throw an error at compile-time if the variable is unused or reassigned with a different type annotation. However, the error does not block the code from executing, the JavaScript code will still be generated.

Static typing is optional in TypeScript and if no type is defined but the variable has a value, TypeScript will infer the value as type. And if the variable has no value, the type will be set to any by default.

Now, let's start using TypeScript in the next section to see it in action.

Setting up TypeScript

As I said earlier, TypeScript needs to compile to plain JavaScript, hence we need to use a tool to do the compilation. And to have access to that tool, you need to install TypeScript by running this command on the terminal.

  yarn add -g typescript

Or if you are using npm:

  npm install -g typescript

Note that here I use the -g flag to install TypeScript globally so that I can access it from anywhere.

By installing TypeScript, we have now access to the compiler, and we can compile our code to JavaScript. Later we will dive into it and what it does, but for now let's add a configuration file to our project. It's not mandatory to add a config file - But for many cases, it's useful to have it since it allows us to define rulesets for the compiler.

Configuring TypeScript with tsconfig

tsconfig is a JSON file that helps to configure TypeScript. Having a config file is better since it helps to control the behavior of the compiler. And to create the config file, you first need to create a new directory named Pokedex and browse into the root of the folder. Then, open it on the terminal or an IDE and run this command to generate a new TypeScript configuration file.

  tsc --init

Once the file generated, we can now explore it on an IDE.

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "public/js"
        "rootDir": "src",
        "strict": true,
        "esModuleInterop": true
        "forceConsistentCasingInFileNames": true
    },
    "include": ["src"]
}

This config file is much verbose than that, I removed the comments and unused values to make it easy to read. That said, we can now break down these values, explain each, and what it does.

target: it specifies the ECMAScript target version when compiling the TypeScript code. Here, we target es5 to support all browsers, you can change it to ES6, ES3(it's the default if no target is specified), ES2020, etc.
module: it defines the module of the compiled code. The module can be Common JS, ES2015, ES2020, etc.
outDir: it specifies the output directory for the code compiled to JavaScript.
rootDir: it defines the location where the TypeScript files that need to be compiled are located.
include: it helps to define which directory need to be compiled because if you don't have that value, the compiler will take every .ts file and compile it to JavaScript even if an output directory is defined.

With that in place, we can now dive into one of the most important parts of TypeScript: the Types

TypeScript Types

Types provide a way to enhance code quality and understandability since it defines the variable types. They are optional and help first to define what a given variable should have as value and also allows the compiler to catch errors before runtime.

TypeScript has several types such as number, string, boolean, enum, void, null, undefined, any, never, array, and tuple. We won't see all types in this guide, but keep in mind that they exist.

Now, let's see some examples of basic Types.

Basic TypeScript Types

let foo: string = "test"
let bar: number = 1
let baz: string[] = ["This", "is", "a", "Test"]

As you can see here, we have three variables with different types. foo expects a string, bar, a number, and baz, an array of string. If they receive anything else than the type declared, an error will be thrown by TypeScript.

You can also declare baz like that: let baz: Array<string> = ["This", "is", "a", "Test"].

Now, let's try to reassign one of these variables and see how TypeScript behaves.

let foo: string = "test"
foo = 1

Type '1' is not assignable to type 'string'

TypeScript will throw an error because we have already declared foo to expect a string as value. And this error is caught at compile-time which makes TypeScript great and useful.

With TypeScript, types can be explicit like we did above, however, they can be also implicit. It's better to explicitly define the type of a given value because it helps the compiler and the next developer who inherit the code. But you can also declare variables with an implicit type annotation.

let foo = "test"
let bar = 1
let baz = ["This", "is", "a", "Test"]

TypeScript will try here to infer as much as it can to give you type safety with less code. It will take the value and define it as a type for the variable. And nothing will change regarding errors.

Let's try to reassign these variables to see what's will happen.

foo = 7
bar = "updated"
baz = [2, true, "a", 10]

TypeScript will catch the errors like before, even if variables types are declared implicitly.

Type '7' is not assignable to type 'string'.
Type '"updated"' is not assignable to type 'number'.
Type 'true' is not assignable to type 'string'.

When dealing with an object of several properties, it can be tricky and annoying to define the types. But luckily, TypeScript has something to help you along with that use-case. So, let's dive into TypeScript Interfaces and Type aliases in the next section.

Interfaces and Type aliases

Interfaces and Type aliases help to define the shape of an object-like data structures. They seem like the same regarding their structure, but keep in mind that they are different. However, the consensus amongst developers is to use interface whenever you can since it's in the default tslint ruleset.

Now, let's create an interface and a type alias in the next section to see them in action.

interface ITest {
  id: number;
  name?: string;
}

type TestType = {
  id: number,
  name?: string,
}

function myTest(args: ITest): string {
  if (args.name) {
    return `Hello ${args.name}`
  }
  return "Hello Word"
}

myTest({ id: 1 })

As you can see, the structure of an interface and a type alias looks like a JavaScript object. They have to define the form of a given data with TypeScript.

Notice that here, I use an optional field name by adding a question mark (?). It allows making the property name optional. That means if no value is passed to the property name, it will return undefined as value.

Next, we use the interface ITest as a type for the argument received by the function myTest. And as with variables, functions can also be defined to return a specific type. And here, the return value must be a string otherwise an error will be thrown by TypeScript.

So far, we have covered all the basic knowledge needed to get started with TypeScript. Now, let's use it to build a Pokedex with HTML and CSS.

Let's dive in

Build a Pokedex app using TypeScript

The project we are going to build will fetch remote data from the Pokemon API and display each pokemon with TypeScript.

So, let's start by creating three new files in the root of the folder Pokedex: index.html, style.css, and src/app.ts. And for the configuration of TypeScript, we will use the same tsconfig.json file created earlier.

Now, let's move to the markup part and add some content to the HTML file.

Markup

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>TypeScript Pokedex</title>
  </head>
  <body>
    <main>
      <h1>Typed Pokedex</h1>
      <div id="app"></div>
    </main>
    <script src="public/js/app.js"></script>
  </body>
</html>

As you can see we have a relatively simple markup. There are two important things to retain though: the id app of the div tag that will be used to append the content using TypeScript and the script tag that points to the public folder and to be precise the JavaScript file that TypeScript will create for us during compile time.

Besides, the CSS file is a bit long, so I won't cover it so as not to waste your time and stay focused on TypeScript. That said, we can now dive into it and start fetching data from the API.

Fetch and display data using TypeScript

We start the TS part by selecting the id app which is the id of the div tag.

src/app.ts

const container: HTMLElement | any = document.getElementById("app")
const pokemons: number = 100

interface IPokemon {
  id: number;
  name: string;
  image: string;
  type: string;
}

Here, we have a type annotation that has not to be covered yet. This is a Union Type which allows having alternative types for a given variable. That means if container is not of type HTMLElement, TypeScript will check again if the value is equal to the type after the pipe (|) symbol and so forth because you can have multiple types.

Next, we have an interface IPokemon that defines the shape of a pokemon object which will be used next in the function responsible for displaying the content.

src/app.ts

const fetchData = (): void => {
  for (let i = 1; i <= pokemons; i++) {
    getPokemon(i)
  }
}

const getPokemon = async (id: number): Promise<void> => {
  const data: Response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
  const pokemon: any = await data.json()
  const pokemonType: string = pokemon.types
    .map((poke: any) => poke.type.name)
    .join(", ")

  const transformedPokemon = {
    id: pokemon.id,
    name: pokemon.name,
    image: `${pokemon.sprites.front_default}`,
    type: pokemonType,
  }

  showPokemon(transformedPokemon)
}

The function fetchData allows us to loop through the number of pokemon to retrieve and for each object call getPokemon with the pokemon number.

It may take time to fetch data, hence we use an asynchronous function that returns a Promise of type void. This last means that the function won't return a value.

And once the data fetched, we can now create a new object transformedPokemon that mirrors the interface IPokemon, and then pass it as an argument to showPokemon().

src/app.ts

const showPokemon = (pokemon: IPokemon): void => {
  let output: string = `
        <div class="card">
            <span class="card--id">#${pokemon.id}</span>
            <img class="card--image" src=${pokemon.image} alt=${pokemon.name} />
            <h1 class="card--name">${pokemon.name}</h1>
            <span class="card--details">${pokemon.type}</span>
        </div>
    `
  container.innerHTML += output
}

fetchData()

As you can see, the function showPokemon receives as a parameter the pokemon object of type IPokemon and returns void or no value to be precise. It will just append the content to the HTML file with the help of the id container (remember, it's the div tag).

Great! we have now done a lot, however, something is still missing because the index.html file will display nothing if you try to launch it in the browser since TypeScript needs to be compiled to plain JavaScript. So, let's do that in the next section.

Compile TypeScript to JavaScript

Earlier in this tutorial, we installed the TypeScript compiler which allows compiling the TS code to JavaScript. And to do so, you need to browse into the root of the project and run the following command.

tsc

This command will compile every file with .ts extension to JavaScript. And since we have a tsconfig file, the compiler will follow the defined rules and compile only the TS files located in the src folder and put the JS code into the public directory.

The compiler also allows compiling only a single file.

  tsc myFile.ts

And if you do not specify a name after the TS file (myFile.ts), the compiled JS file will take the same name as the TS file.

And if you want to not execute the command on every change, just add a -w flag to let the compiler keep watching for a change and recompile the code when needed.

  tsc -w

And now if you launch the index.html file, you will see your Pokedex successfully rendered in the browser.

Great! we have now done learning the basics of TypeScript by building a Pokedex app with HTML and CSS.

Preview the finished project here or find the Source Code here

Thanks for reading.

Resources

Here some useful resources to dive deeper into TypeScript.

TypeScript Types

TypeScript Compiler Options

TypeScript Handbook

Apollo GraphQL: How to build a Full-stack app with React and Node Js

Wed, 29 Apr 2020 16:30:00 GMT

Apollo Client is a complete state management library for JavaScript apps. It's a powerful tool since it can be used on both back-end and front-end side. In this tutorial, we will use it on both by building first an Apollo GraphQL Server with Node JS and then consume the data on the client-side using React JS.

If you're new to GraphQl, this tutorial might help you. Otherwise, Let's get started.

Sorry for the interrupt!

If you're interested in learning Node JS, Express and GraphQL or React in a comprehensive way, I highly recommend these bestseller courses:
NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)
React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Building the server with Apollo, Node, and GraphQl
Building the Client-side with React

Building the server with Apollo, Node, and GraphQl

In this guide, I will use the Github API to have data to show, and that operation will be done by the GraphQl server built with Apollo and Node JS. And to do so, we need to run the following command on the terminal to set up a new Node JS project.

  yarn init

Once the set up is done, we can now install the needed packages by running this command.

  yarn add apollo-server graphql axios

Great, we have now all we need to build a server, let's create first a new file app.js in the root which will be the entry point of our server.

Next, we need to define a Graphql schema that mirrors the way our data should look like.

GraphQl Schema

A schema describes the shape of your data graph. It defines a set of types with fields that are populated from your back-end data stores. So, let's add a new schema in the app.js file.

app.js

const { ApolloServer, gql } = require("apollo-server")
const axios = require("axios")

const typeDefs = gql`
  type User {
    id: ID
    login: String
    avatar_url: String
  }

  type Query {
    users: [User]
  }
`

As you can see we don't use all data provided by the Github API. We just need the id that will be used as a reference key on the React App, the login, and the avatar_url. We also have a query users that returns an array of users.

Now we have a GraphQL schema, it's time to build the corresponding resolvers to complete the query operation.

GraphQl resolvers

A resolver is a collection of functions that helps generating a response from a GraphQL query. So, let's add a new resolver in the app.js file.

app.js

const resolvers = {
  Query: {
    users: async () => {
      try {
        const users = await axios.get("https://api.github.com/users")
        return users.data.map(({ id, login, avatar_url }) => ({
          id,
          login,
          avatar_url,
        }))
      } catch (error) {
        throw error
      }
    },
  },
}

A resolver has to match by name the appropriate schema. Therefore, here users refers to the users query defined in our schema. It's a function that fetches the data from the API with the help of axios and returns as expected the id, the login, and the avatar_url. And that operation can take time to complete that's why async/await is used here to handle it consequently.

With that, we can now create the Apollo Server in the next section.

Creating the Apollo Server

If you remember, in the app.js file, we had imported ApolloServer from the apollo-server package, it a constructor that receives an object as an argument. And that object must contain the schema and the resolver to be able to create the server.

So, let's tweak app.js a bit with ApolloServer.

app.js

const server = new ApolloServer({
  typeDefs,
  resolvers,
})
//  typeDefs: typeDefs,
//  resolvers: resolvers
server.listen().then(({ url }) => console.log(`Server ready at ${url}`))

Here, we pass as a parameter an object that holds the schema and the resolver to ApolloServer to create the server and then listens to it. With that in place, we have now a functional server to work with.

You can already play with it and send queries with the help of GraphQL playground by running this command:

  yarn start

You can now preview it on http://localhost:400

The complete app.js file

const { ApolloServer, gql } = require("apollo-server")
const axios = require("axios")

const typeDefs = gql`
  type User {
    id: ID
    login: String
    avatar_url: String
  }

  type Query {
    users: [User]
  }
`

const resolvers = {
  Query: {
    users: async () => {
      try {
        const users = await axios.get("https://api.github.com/users")
        return users.data.map(({ id, login, avatar_url }) => ({
          id,
          login,
          avatar_url,
        }))
      } catch (error) {
        throw error
      }
    },
  },
}

const server = new ApolloServer({
  typeDefs,
  resolvers,
})

server.listen().then(({ url }) => console.log(`Server ready at ${url}`))

A server alone does not do much, we need to add a start script in the package.json file to as you guessed start the server.

package.json

  // first add nodemon: yarn add nodemon --dev
  "scripts": {
    "start": "nodemon src/index.js"
  }

With that, we have now a server to fetch data from the Github API, it's time to move to the client-side and consume the data.

Let's do it

Building the Client-side with React

The first thing we have to do is creating a fresh React App by running in the terminal the following command

npx create-react-app client-react-apollo

Next, we need to install the Apollo and GraphQl packages.

  yarn add apollo-boost @apollo/react-hooks graphql

Now, we can connect Apollo with our React App by updating the index.js file.

Connecting React to Apollo

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from '@apollo/react-hooks';

import App from './App';
import './index.css';
import * as serviceWorker from './serviceWorker';

const client = new ApolloClient({
  uri: 'https://7sgx4.sse.codesandbox.io'
})


ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

As you can see, we start by importing ApolloClient and ApolloProvider. The first helps us to inform Apollo about the URL to use when fetching data. And if no uri is passed to ApolloClient, it will take the current domain name plus /graphql. The second is the Provider which expects to receive the client object to be able to connect Apollo to React.

That said, we can now create a component that shows the data.

Fetching the data

App.js

import React from "react"
import { useQuery } from "@apollo/react-hooks"
import gql from "graphql-tag"
import "./App.css"

const GET_USERS = gql`
  {
    users {
      id
      login
      avatar_url
    }
  }
`

Here, we have a simple GraphQL query that fetches the data. That query will be passed later to useQuery to tell to Apollo which data to fetch.

App.js

const User = ({ user: { login, avatar_url } }) => (
  <div className="Card">
    <div>
      <img alt="avatar" className="Card--avatar" src={avatar_url} />
      <h1 className="Card--name">{login}</h1>
    </div>
    <a href={`https://github.com/${login}`} className="Card--link">
      See profile
    </a>
  </div>
)

This presentational component will be used to display a user. It receives the data from the App component and displays it.

Showing the data

App.js

function App() {
  const { loading, error, data } = useQuery(GET_USERS)

  if (error) return <h1>Something went wrong!</h1>
  if (loading) return <h1>Loading...</h1>

  return (
    <main className="App">
      <h1>Github | Users</h1>
      {data.users.map(user => (
        <User key={user.id} user={user} />
      ))}
    </main>
  )
}

export default App

The useQuery hook provided by Apollo receives the GraphQL query and returns three states: the loading, the error, and the data. If the data are successfully fetched, we pass it to the User component otherwise we throw an error.

The complete App.js file

import React from "react"
import { useQuery } from "@apollo/react-hooks"
import gql from "graphql-tag"
import "./App.css"

const GET_USERS = gql`
  {
    users {
      id
      login
      avatar_url
    }
  }
`

const User = ({ user: { login, avatar_url } }) => (
  <div className="Card">
    <div>
      <img alt="avatar" className="Card--avatar" src={avatar_url} />
      <h1 className="Card--name">{login}</h1>
    </div>
    <a href={`https://github.com/${login}`} className="Card--link">
      See profile
    </a>
  </div>
)

function App() {
  const { loading, error, data } = useQuery(GET_USERS)

  if (error) return <h1>Something went wrong!</h1>
  if (loading) return <h1>Loading...</h1>

  return (
    <main className="App">
      <h1>Github | Users</h1>
      {data.users.map(user => (
        <User key={user.id} user={user} />
      ))}
    </main>
  )
}

export default App

Great! with that, we have now done building a full-stack Apollo GraphQL app using React and Node JS.

Preview the Apollo GraphQL Server here

Preview the React App here

Find the source code here

Thanks for reading

How To Build Finite State Machines using XState and React?

Tue, 21 Apr 2020 18:15:00 GMT

XState is a library for creating, interpreting, and executing finite state machines and statecharts. It's a really powerful package that can be used to manage state in React Apps.

In this guide, we will build a Finite State Machine from scratch using XState and React

Let's dive in!

What is a Finite State Machine?
Setting up
Building a State Machine
Resources

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

What is a Finite State Machine?

A finite state machine is a mathematical model of computation that describes the behavior of a system that can be in only one state at any given time. For example, let's say we have a switch button, the state can only be On or Off, it's not possible to have On and Off at the same time and this is a representation of a finite state machine.

I agree that theory alone is always confusing

This is a bit cryptic, but no worries once we start implementing the state machine, it will be much clearer. So, let's create a new React App and add the needed dependencies.

Setting up

To do so, let's run the following command on the terminal to create a fresh React App.

npx create-react-app react-xstate-example

Next, we have to add the xstate and @xstate/react libraries by running the command below:

yarn add xstate@latest @xstate/react

Once the installation is done, we can now start building our state machine in the next section.

Building a State Machine

In this guide, we will build a simple theme switcher, so let's start building first the state machine.

There is a great tool provided by XState, The Xstate Visualizer which allows us to build and visualize the state machine in the browser.

Now, let's take a look of our state machine in App.js

Appjs

import React from "react"
import { Machine } from "xstate"
import "./App.css"

const changeTheme = Machine({
  id: "theme",
  initial: "dark",
  states: {
    dark: {
      on: { CHANGE: "light" },
    },
    light: {
      on: { CHANGE: "dark" },
    },
  },
})

As you can see here, we use the same state machine built with the visualizer. And of course, we need to import Machine from the xstate library to build the state machine otherwise it won't work.

Now, let's break down the object passed as an argument to the Machine() method.

id: it's the identifier or name of the state machine
initial: it's as the name suppose, the initial state of the machine.
states: this is where we put our state, here we have two states: dark and light
on: it's used to fires an action. Here, we have an event to change the theme.

A state machine alone doesn't do much, let's use it in the next section.

App.js

import React from "react"
import { Machine } from "xstate"
import { useMachine } from "@xstate/react"
import "./App.css"

const changeTheme = Machine({
  id: "theme",
  initial: "dark",
  states: {
    dark: {
      on: { CHANGE: "light" },
    },
    light: {
      on: { CHANGE: "dark" },
    },
  },
})

function App() {
  const [current, send] = useMachine(changeTheme)

  return (
    <div className="App">
      <h1>{current.matches("dark") ? "Dark Theme" : "Light Theme"}</h1>
      <button onClick={() => send("CHANGE")}>Change Theme</button>
    </div>
  )
}

export default App

Here, we start by importing the useMachine hook which takes as an argument the state machine and returns the current state and a function to update it. If you are familiar with useState hook, it works the same way.

The current state has a bunch of property, but here we just need the matches() method which checks if the current state is equal or not to the argument passed as a parameter and handle it consequently. And now, if the button is clicked, it will change the theme appropriately.

Great! we have done building a Finite State Machines using XState and React.

Thanks for reading!

You can find the Source code here

Photo by Solé Bicycles on Unsplash

Resources

XState Docs

XState Visualizer

XState Tutorials

How to Style Your React Apps with Less Code Using Tailwind CSS, Styled Components, and Twin Macro

Tue, 14 Apr 2020 18:20:00 GMT

Tailwind is a utility-first CSS framework for rapidly building custom designs. It can be used alone to style React Apps. However, it can be better combined with Styled Components. That combination brings the magic of Tailwind into CSS-in-JS.

In this guide, we will build a form component without writing a single line of CSS using Tailwind CSS, Styled Components, and Twin Macro.

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Let's dive in!

Why use it?
Setting up
Configuring Tailwind CSS
Tailwind CSS + Styled Components
Conclusion
Resources

Why use it?

The "Why" is pretty legit and important, since we can use either Tailwind CSS or Styled Components. So why combine them and use both at the same time? Well, Tailwind classes can be quite long, and it causes our components to have some readability issues. Maintaining them can be tough.

In the case of Styled Components, there is no problem except the fact that we have to write the style. It is not that problematic – but why should we write something that Tailwind already offers?

So it makes sense to use Tailwind CSS in combination with Styled Components. Tailwind CSS helps with utility classes, and Styled Components keeps our components clean with the help of CSS-in-JS.

Setting up

In this guide, we will build a simple form as an example. And to do so, we need a fresh React app. So, let's run in the terminal the following command.

    npx create-react-app react-styled-tailwind

Next, structure your folder as follows:

├── src
|  ├── App.js
|  ├── App.test.js
|  ├── assets
|  |  └── tailwind.css
|  ├── index.js
|  ├── serviceWorker.js
|  ├── setupTests.js
|  ├── tailwind.config.js
|  └── styles
|     └── index.js
├── babel.plugin.js
├── package.json
├── postcss.config.js
├── README.md
├── yarn-error.log
└── yarn.lock

I will explain each file as we progress, but for now, let's install the dependencies.

    yarn add -D tailwindcss twin.macro autoprefixer babel-plugin-macros postcss-cli

Next, install Styled Components by running this command.

    yarn add styled-components

Once these libraries are installed, we can now move to the configuration of Tailwind CSS

Configuring Tailwind CSS

To configure it, we have to manually add a config file or run the following command to generate a new one:

    npx tailwind init src/tailwind.config.js

Here, instead of generating the config file on the root directory, you have to put it in the src folder - otherwise an error will be thrown by Twin Macro.

And the generated file will look like this.

tailwind.config.js

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

As you can see, the config file is "empty" since there is no configuration. For this tutorial, we don't need to configure anything here. But you can customize it to follow your needs or run the command with the --full option to get the complete Tailwind config.

Next, we need to create a new file postcss.config.js in the root directory.

postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss")("./src/tailwind.config.js"),
    require("autoprefixer"),
  ],
}

This configuration tells the postcss.config.js file to use the Tailwind CSS library and the tailwind.config.js file during compile-time. With the help of autoprefixer it tracks which properties need to be prefixed.

With that setup, we can now move to the babel.plugin.js file which helps to transform Tailwind classes into CSS-in-JS code.

babel.plugin.js

module.exports = {
  tailwind: {
    plugins: ["macros"],
    config: "./src/tailwind.config.js",
    format: "auto",
  },
}

Later we will see in action what this file does. But for now, just keep in mind that it's the glue between Tailwind CSS and Styled Components.

There are just three last steps to do to complete the setup.

First, in the tailwind.css file, we need to import some utilities from the Tailwind library.

src/assets/tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Here, as you can see, there is nothing fancy, just some imports that allow us to use Tailwind utility classes.

The second step is to connect our React App with Tailwind CSS.

index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import "./assets/styles.css"import * as serviceWorker from "./serviceWorker"

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

serviceWorker.unregister()

Here, we import assets/styles.css which contains the CSS style. And later, we will tweak the default script a bit to build the CSS and add it to the assets/styles.css file during compile-time.

And last but not the least, we have to update the package.json file.

package.json

"scripts": {
    "build:css": "postcss src/assets/tailwind.css -o src/assets/styles.css",    "watch:css": "postcss src/assets/tailwind.css -o src/assets/styles.css",    "start": "npm run watch:css & react-scripts start",
    "build": "npm run build:css react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 }

These two scripts build:css and watch:css will respectively build the CSS and watch for changes and rebuild it if needed. And as I said earlier, the output file will be located in the assets folder.

With that change, we can now use Tailwind in our app. Let's now combine it with Styled Components.

Tailwind CSS + Styled Components

Earlier, in our structure folder, we had a styles folder. It's time to tweak it with the following code.

styles/index.js

import styled from "styled-components"
import tw from "twin.macro"

const StyledForm = styled.main.attrs({
  className: "flex flex-col h-screen justify-center items-center bg-gray-100",
})`
  & {
    form {
      ${tw`bg-white text-center rounded py-8 px-5 shadow max-w-xs`}
    }
    input {
      ${tw`border-gray-300 mb-4 w-full border-solid border rounded py-2 px-4`}
    }
    button {
      ${tw`bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-blue-700 rounded`}
    }
  }
`
export default StyledForm

We start by importing tw which allows us to use Tailwind classes in nested properties. It's perfectly fine to use the utility classes with the className attribute, but if you want to nest properties you have to use the twin.macro library.

This library will use the babel plugin macros config (babel.plugin.js) to transform the Tailwind CSS utility classes used by nested selectors into readable code that Styled Components can understand.

You can see in this example below how the transformation is done.

// input
const test = ${tw`text-center bg-red w-full`}
// output
const test = {
    background: 'red',
    textAlign: 'center',
    width: '100%'
}

Great! Now that we have combined Tailwind with Styled Components, let's add the styled component to the App.js file.

App.js

import React from "react"
import StyledForm from "./styles"

function App() {
  return (
    <StyledForm>
      <form>
        <input type="text" placeholder="Full name" />
        <input type="text" placeholder="Email" />
        <input type="text" placeholder="Password" />
        <button>Sign In</button>
      </form>
    </StyledForm>
  )
}

export default App

Here, we just imported the styled component and wrapped everything with it to make our form look nice.

Great! You can already see how powerful this combination is. We have built a form component without writing a line of CSS and the component is still readable.

Conclusion

There is a bit of hassle to set up Tailwind CSS. But once it's done and combined with CSS-in-JS, it's really powerful and flexible. This is partly because we can customize the tailwind.config.js file to follow our need or just write normal CSS as we usually do with Styled Components. It's definitely something to consider in your next React app.

Thanks for reading!

You can find the Source Code here

Resources

Tailwind CSS Docs

Tailwind CSS Cheat sheet

Twin Macro Docs

Styled Components Docs

How to build a GraphQl API from scratch with Node JS, Express, and MongoDB

Fri, 03 Apr 2020 18:05:00 GMT

In this guide, we will build from scratch an API with GraphQL, Node JS, Express, and MongoDB. So, let's start by answering an important question: what is GraphQL?

Sorry for the interrupt!

If you're interested in learning Node JS, Express and GraphQL in a comprehensive way, I highly recommend this bestseller course: NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

It's an affiliate link, so by purchasing, you support the blog at the same time.

What is GraphQL?
Setting up the GraphQL API
GraphQL Schema
Creating Mongoose Models
GraphQl resolver
Create the server and an endpoint
Connect the API to MongoDB
Test the API with GraphiQL

What is GraphQL?

GraphQL is a query language created by Facebook. It's an alternative to the REST approach. So, if you come from the REST world, just keep in mind that GraphQL works differently. It has one single endpoint for all kinds of requests, and the method has to be a post request. GraphQL works with types and fields, and it's really powerful since it provides all or just the needed data.

Send a GraphQL query to your API and get exactly what you need, nothing more and nothing less.

We will see it in action later, but for now, let's plan our API.

Setting up the GraphQL API

For the API, we will have the possibility to create articles and store them in MongoDB. And also be able to fetch them back.

To do so, we have to create a new project by running the following command in the terminal.

    yarn init

In this tutorial, I will use yarn, you can use npm if you want too. It's really up to you

Next, structure your project as follow:

├── node_modules
├── graphql
|  ├── resolvers
|  |  └── index.js
|  └── schema
|     └── index.js
├── models
|  └── article.js
├── app.js
├── nodemon.json
├── package.json
└── yarn.lock

As you can see, we have a graphql folder that keeps the schema and the resolvers of the API.

Next, we have a models folder which holds what an article should looks like and last but not the least, a nodemon.json file to hold our environment variables and the entry point of the server app.js.

We have a couple of libraries to install, so I will keep things simple and install the needed one as we progress.

Now, let's run the following commands on the terminal to install express and nodemon.

    yarn add express

Next, add nodemon as a development dependency.

    yarn add nodemon -D

With that, we can now add a start script on the package.json file to be able as you might guess start the server.

package.json

{
  "name": "graphql-api",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "nodemon app.js"
  },
  "dependencies": {
    "express": "^4.17.1",
  },
  "devDependencies": {
    "nodemon": "^2.0.2"
  }
}

As you can see, here we use nodemon to start the server and when a file is added or updated, nodemon will react to the update automatically.

We have now the command to start the server, but still, no server to start. We will create the server later, but for now, let's define the schema of the API.

GraphQL Schema

A schema describes the shape of your data graph. It defines a set of types with fields that are populated from your back-end data stores.

And to create a schema, we need to install the graphql package by running on the terminal:

    yarn add graphql

Next, we have to add the following code block to create a GraphQL schema.

graphql/schema/index.js

const { buildSchema } = require("graphql")

module.exports = buildSchema(`

  type Article {
    _id: ID!
    title: String!
    body: String!
    createdAt: String!
  }


  input ArticleInput {
    title: String!
    body: String!
  }

  type Query {
    articles:[Article!]
  }

  type Mutation {
    createArticle(article:ArticleInput): Article
  }

  schema {
    query: Query
    mutation: Mutation
  }
`)

To create a schema, we first have to import buildSchema from graphql, and next create our types. GraphQL works with types, it supports several scalar types.

Here, we have the type Article which must have an _id (you have to name it like this due to MongoDB) of type ID, a title, a body and a createdAt field of type String.

The exclamation mark ! just means that the type defined is required, it has to match the type.

Next, we have an input type which defines what the expected input should look like. It's the data entered by the user and will be used to create a new article.

A GraphQL query as the name suggests is used to define a query type. And here, we have an articles query to fetch the data. It should return an array, and each article has to match the type Article.

Now, to be able to fetch articles, we have to create them first. And to do so, we use a GraphQl mutation. It's a query that creates, updates or deletes data in the data store and returns a value.

And here to create a new article we use the createArticle mutation. It receives an object of type ArticleInput and returns the created article.

Now we have everything we need to create a schema, the final thing to do is to pass the Query and the Mutation to the schema.

And Voilà, we have now a schema.

However, a GraphQl schema is not enough though, we have to create another schema, a model to be precise to ensure that the data send to MongoDB matches the schema defined with GraphQL.

Creating Mongoose Models

As I mentioned earlier, MongoDB will be used as a database, and to make things easier, we will use mongoose to interact with it.

And to install it, we need to run the following command in the terminal.

  yarn add mongoose

Next, we can now create a model for an article.

models/article.js

const mongoose = require("mongoose")

const Schema = mongoose.Schema

const artcleSchema = new Schema(
  {
    title: {
      type: String,
      required: true,
    },

    body: {
      type: String,
      required: true,
    },
  },
  { timestamps: true }
)

module.exports = mongoose.model("Article", artcleSchema)

To create a model of data, we first have to import mongoose and access to the Schema method. With that, we can now create a schema for a given article. And if you remember, in our GraphQL schema we have some required fields (!), hence, here we use the required property to follow the schema defined with GraphQL.

And for the _id, we don't need to add it as a field in the schema since it will be created automatically. It's the same thing for createdAt, the second argument timestamps: true tells to mongoose to add a createdAt and updatedAt fields to the schema.

Now, to create the model, we have to use mongoose again and pass as arguments the name of the model and the schema to the model() method.

Now, it seems like we have everything we need to create GraphQL resolvers for the API. So, let's do that in the next section.

GraphQl resolver

A resolver is a collection of functions that helps generating a response from a GraphQL query. It handles the request and returns a response. And every query or mutation name has to match exactly the name of the resolver function. That means, if we have a query named articles, we should have an articles() resolver function.

Now to create resolvers, we have to add this code block below in the graphql/resolvers/index.js file.

graphql/resolvers/index.js

const Article = require("../../models/article")

module.exports = {
  articles: async () => {
    try {
      const articlesFetched = await Article.find()
      return articlesFetched.map(article => {
        return {
          ...article._doc,
          _id: article.id,
          createdAt: new Date(article._doc.createdAt).toISOString(),
        }
      })
    } catch (error) {
      throw error
    }
  },

  createArticle: async args => {
    try {
      const { title, body } = args.article
      const article = new Article({
        title,
        body,
      })
      const newArticle = await article.save()
      return { ...newArticle._doc, _id: newArticle.id }
    } catch (error) {
      throw error
    }
  },
}

In the GraphQL schema, we have a query named articles which return an array of articles. Therefore, we should have here a resolver with the same name.

The articles function uses the model created with mongoose to send the request to MongoDB. That said, we can now access .find() to well as the name suggest fetch all articles from the database.

The returned value is an array, therefore, we have to loop through it and for each object return the document (it's an object which holds the data), override the _id with mongoose and convert the createdAt field to a more user-friendly date.

And, as you already know, this operation can take time to complete, that the reason why we use async/await to handle the request.

For the second resolver function createArticle, it handles the mutation defined previously in the GraphQL schema. It receives as an argument the article object, and with that, it creates a new article based on the Article model.

And to store it to MongoDB, we just have to use another helper provided by mongoose, the save() method and return as expected in the GraphQL schema the newly created article.

By the way, the response sent by MongoDB has some metadata that's why for both functions, I return the _doc property directly.

With that change, we have now a schema and resolvers for our GraphQL API, it's pretty much what we need to move to the next section and create a server and an endpoint.

Create the server and an endpoint

In the package.json file, we have a script to start the server. And it starts with the app.js file, thus we need to update that file a bit to have a real server.

Before writing the logic of creating a server, we need to install express-graphql which is the glue between graphql and express.

And to install it, we have to run the following command in the terminal.

  yarn add express-graphql

Next, add this code block to app.js

app.js

const express = require("express")
const graphqlHttp = require("express-graphql")
const graphqlSchema = require("./graphql/schema")
const graphqlResolvers = require("./graphql/resolvers")

const app = express()

app.use(
  "/graphql",
  graphqlHttp({
    schema: graphqlSchema,
    rootValue: graphqlResolvers,
    graphiql: true,
  })
)

app.listen(3000, () => console.log("Server is running on localhost:3000"))

As you can see, here we import the schema and resolvers created earlier. And to use them, we need graphqlHttp (you can name it whatever you want). It's a method provided by express-graphql that expects some options. Here, it receives the schema and the resolver, I also enabled graphiql which is a cool tool for testing queries.

The endpoint for all requests will be /graphql, and to be able to reach that endpoint, we need to start the server and listen to the port 3000.

Great! we've now a working API, but thus far there is still something missing: the API is not connected yet to MongoDB. So, let's fix that in the next section.

Connect the API to MongoDB

If you remember, in the structure folder, we had a nodemon.json file, that file will be used now to store our environment variables.

But first, you will need to create a new cluster on MongoDB Atlas and get the username and password of the database.

Next, update the credentials with yours.

nodemon.json.

{
    "env": {
        "MONGO_USER": "your_username",
        "MONGO_PASSWORD": "your_password",
        "MONGO_DB": "your_database"
    }
}

Now we have the needed credentials, it's time to connect the API to MongoDB. And to do so, we have to tweak a bit app.js.

const express = require("express")
const graphqlHttp = require("express-graphql")
const mongoose = require("mongoose")
const graphqlSchema = require("./graphql/schema")
const graphqlResolvers = require("./graphql/resolvers")

const app = express()

app.use(
  "/graphql",
  graphqlHttp({
    schema: graphqlSchema,
    rootValue: graphqlResolvers,
    graphiql: true,
  }))const uri = `mongodb+srv://${process.env.MONGO_USER}:${process.env.MONGO_PASSWORD}@cluster0-uox7n.mongodb.net/${process.env.MONGO_DB}?retryWrites=true&w=majority`const options = { useNewUrlParser: true, useUnifiedTopology: true }mongoose  .connect(uri, options)
  .then(() => app.listen(3000, console.log("Server is running")))
  .catch(error => {
    throw error
  })

This link comes from MongoDB Atlas, it allows us to connect to the database. And I also use the credentials held on nodemon.json to build the uri.

Next, we use again mongoose and pass as parameters the uri and some options to the connect() method. And when the operation is successfully finished, we start the server, otherwise, an error will be thrown.

With that change, we have now connected the API to MongoDB. It's time now to test it with the GraphQL playground to see if the API works as expected.

Test the API with GraphiQL

To access the GraphQL playground, we have to start the server with the following command:

  yarn start

Now, if you browse to http://localhost:3000/graphql, you will be able to play with GraphiQL.

Create a new article

To create an article, we have to send a query mutation.

Seems like it works perfectly, the mutation creates a new article and returns it as expected.

Now, let's try fetching the articles stored on MongoDB.

Fetch the articles

As I said earlier, GraphQL allows us to fetch all or just the fields we need.

And here, I want to fetch for each article the title, body and, createdAt from the database. And, as you can see the response returned by MongoDB is the expected one.

Great! We have now done building a GraphQL API from scratch with Node JS, Express, and MongoDB.

You can find the source code here

Thanks for reading

How to build a Fullscreen Slider with React Hooks

Tue, 24 Mar 2020 16:25:00 GMT

In this tutorial, we will build a Fullscreen Slider component with React Hooks. And to do that, we will create a custom hook to handle all the logic, then use it as a helper method to display the slides.

So, let's start by planning how our app will look like.

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Plan our app
Creating the custom hook
Display the slider

Plan our app

To be able to follow along, you have to create a brand new React app by running the following command on your terminal:

npx create-react-app react-fullscreen-slider

Next, structure your project as follow:

├── App.js
├── App.test.js
├── components
|  └── Slider.js
├── hooks
|  └── useSlider.js
├── images.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

As you can see, the folder structure is very simple. We have a components folder which holds a file named Slider.js, and another folder hooks which keeps as you might guess the custom hook useSlider, and an images.js file which contain the images to show on the slider.

Now, let's add some lines of code into these files.

images.js

export default [
  {
    src: "https://drive.google.com/uc?id=1_oA9Sx4D4DhFrYBFQdL0I1CUIz_LhQue",
    text: "Duis aute irure dolor in reprehenderit in voluptate velit esse",
  },
  {
    src: "https://drive.google.com/uc?id=1rJFs-8So16UCiDag__hG4yyf_RnC08Fa",
    text: "Consectetur adipisicing elit cillum dolore eu fugiat nulla",
  },
  {
    src: "https://drive.google.com/uc?id=1HO2AGjd_1yyYI4pYTTBmGXBaWHoGSqCl",
    text: "Asperiores ex animi explicabo cillum dolore eu fugiat nulla",
  },
]

As I said earlier, this file holds the images. And each object has an image and a description. By the way, you can use a different approach to declare your images, it's totally up to you.

We have now the data to show, it's time to build the custom hook to handle the logic of the slider.

Let's do that

Creating the custom hook

The useSlider function will receive three arguments: the image of the slide, the description and an array of images.

hooks/useSlider.js

import { useEffect } from 'react'

const useSlider = (slideImage, slideText, images) => {
 let slideCounter = 0;

 useEffect(() => startSlider())

 const startSlider =() => {
    slideImage.current.style.backgroundImage = `linear-gradient(
        to right,
        rgba(34, 34, 34, 0.4),
        rgba(68, 68, 68, 0.4)
        ), url(${images[0].src})`;
        slideText.current.innerHTML = images[0].text;
}

With these parameters in place, we can now create a new function startSlider() and handle the first slide to display when the page finished loading.

Later, we will use useRef to select elements and be able to manipulate the DOM (Document Object Model). But for now, just keep in mind that slideImage and slideText are references to DOM elements.

We can now access to the properties of these elements and start styling it. Here, we apply a linear gradient to the image, to well have a nice looking style, and next, append the corresponding text to the DOM.

hooks/useSlider.js

const handleSlide = slide => {
  slideImage.current.style.backgroundImage = `linear-gradient(
    to right,
    rgba(34, 34, 34, 0.4),
    rgba(68, 68, 68, 0.4)
    ), url(${images[slide - 1].src})`
  slideText.current.innerHTML = images[slide - 1].text
  animateSlide(slideImage)
}

const animateSlide = () => {
  slideImage.current.classList.add("fadeIn")
  setTimeout(() => {
    slideImage.current.classList.remove("fadeIn")
  }, 700)
}

Next, we use the same method with the function handleSlide() by applying a linear gradient to the image. But this time, we receive as a parameter the number of the slide or counter if you want too, then use it to show the appropriate slide on the screen.

Next, we call the animateSlide() method to well, animate it with a nice fade-in effect.

hooks/useSlider.js

const goToPreviousSlide = () => {
  if (slideCounter === 0) {
    handleSlide(images.length)
    slideCounter = images.length;
  }

    handleSlide(slideCounter)
    slideCounter--;
  }

const goToNextSlide = () => {
  if (slideCounter === images.length - 1) {
    startSlider()
    slideCounter = -1;
    animateSlide(slideImage)
  }

 slideImage.current.style.backgroundImage = `linear-gradient(
        to right,
        rgba(34, 34, 34, 0.4),
        rgba(68, 68, 68, 0.4)
        ),url(${images[slideCounter + 1].src})`;
    slideText.current.innerHTML = images[slideCounter + 1].text;
    slideCounter++;
      animateSlide(slideImage)
}

return { goToPreviousSlide, goToNextSlide }
}

export default useSlider

As you can see, here, we have two main functions: goToPreviousSlide() and goToNextSlide().

The first method goToPreviousSlide() will check if the counter of the slide is equal to 0. And If it's the case, it will show the last slide, otherwise, it displays the previous one.

The second method will do the opposite. It checks if the counter of slides is equal to the last one and if it's the case, it will restart the slider, otherwise, the goToNextSlide() method will show the next slide.

And to make everything accessible from another file, we have to return an object which contains goToPreviousSlide() and goToNextSlide().

That being said, we can now move to the final part and use the custom hook to display the slider in the next section.

Display the slider

We already have the logic to show the slides, the only thing we have to do now is displaying them with Slider.js.

Slider.js

import React, { useRef } from "react"
import useSlider from "../hooks/useSlider"

const Slider = ({ images }) => {
  const slideImage = useRef(null)
  const slideText = useRef(null)
  const { goToPreviousSlide, goToNextSlide } = useSlider(
    slideImage,
    slideText,
    images
  )

  return (
    <div className="slider" ref={slideImage}>
      <div className="slider--content">
        <button onClick={goToPreviousSlide} className="slider__btn-left">
          <i className="fas fa-angle-left"></i>
        </button>
        <div className="slider--feature">
          <h1 className="feature--title">Dreaming</h1>
          <p ref={slideText} className="feature--text"></p>
          <button className="feature__btn">Get started</button>
        </div>
        <button onClick={goToNextSlide} className="slider__btn-right">
          <i className="fas fa-angle-right"></i>
        </button>
      </div>
    </div>
  )
}

export default Slider

I forgot to mention it, but the CSS part will be not covered in this article, you can still find it in the Source Code. So, don't let these class names disturbing you.

The Slider() function is relatively easy to implement since we already have useSlider.

The only thing we have to do is importing useSlider, then pull goToPreviousSlide() and goToNextSlide() without forgetting to pass the parameters as arguments to the function.

And as I said earlier, we have to use useRef to access DOM elements.

With that change, we can now use the Slider component in the App.js file and pass down the images array as props.

App.js

import React from "react"
import Slider from "./components/Slider"
import Images from "./images"

function App() {
  return <Slider images={Images} />
}

export default App

And as you can see here, we just import the Images and pass them as props to the Slider component.

With this tiny update, we have now done building a Fullscreen Slider component using React Hooks.

Thanks for reading!

You can find the source code here

Introducing the Redux+TypeScript template for Create-React-App

Mon, 16 Mar 2020 18:02:00 GMT

There is something new in React, particularly with Create-React-App. Now, we can set up a brand new React app with Typescript and Redux by running one command:

npx create-react-app my-app --template redux-typescript

It will generate all the React-Redux, and TypeScript dependencies and setups needed.

Better, a ready-to-use Redux store is also created and configured for us.

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Folder structure

├── node_modules
├── public
├── app
|  └── store.ts
├── App.css
├── App.test.tsx
├── App.tsx
├── features
|  └── counter
|     ├── Counter.module.css
|     ├── Counter.tsx
|     └── counterSlice.ts
├── index.css
├── index.tsx
├── logo.svg
├── output.txt
├── react-app-env.d.ts
├── serviceWorker.ts
└── setupTests.ts

Learn more about it.

cra-template-redux-typescript

Create-React-App docs on project setup

How to Start Testing Your React Apps Using the React Testing Library and Jest

Thu, 12 Mar 2020 16:49:00 GMT

Testing is frequently seen as something tedious. It's extra code and in some cases, to be honest it's not needed. However, every developer should know at least the basics of testing, because it increases confidence in the product and for most companies, it's a requirement. In React world, there is an amazing library called react-testing-library which helps to test React Apps more efficiently in combination with Jest. In this article, we will see the 8 simple steps to start testing your React Apps like a boss.

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Prerequisites
Basics
What is React Testing Library?
1. How to create a test snapshot?
2. Testing DOM elements
3. Testing events
4. Testing asynchronous actions
5. Testing React Redux
6. Testing React Context
7. Testing React Router
8. Testing HTTP Request
Final Thoughts
Next Steps

Prerequisites

This tutorial assumes that you have at least a basic understanding of React. I will focus only on the testing part. And to follow along, you have to clone the project by running in your terminal:

  git clone https://github.com/ibrahima92/prep-react-testing-library-guide

Next, run:

  yarn

Or, if you use NPM:

npm install

And that's it, let's dive into some basics.

Basics

Some key things will be used a lot in this article, and understanding their role can help you with your understanding.

it or test: describes the test itself. It takes as parameters the name of the test and a function that hold the tests.
expect: it's the condition that the test needs to pass. It will compare the received parameter to a matcher.
a matcher: it's a function that is applied to the expected condition.
render: it's the method used to render a given component.

import React from 'react'
import {render} from '@testing-library/react'
import App from './App'

 it('should take a snapshot', () => {
    const { asFragment } = render(<App />)

    expect(asFragment(<App />)).toMatchSnapshot()
   })
});

As you can see, we describe the test with it, then, use render to display the App component and expect that asFragment(<App />) matches toMatchSnapshot() (the matcher provided by jest-dom). By the way, the render method returns several methods we can use to test our features. We also used destructuring to get the method.

That being said, let's move on and define React Testing Library in the next section.

What is React Testing Library?

React Testing Library is a is a very light-weight package created by Kent C. Dodds. It's a replacement to Enzyme and provides light utility functions on top of react-dom and react-dom/test-utils. React Testing Library is a DOM testing library, which means, instead of dealing with instances of rendered React components, it handles DOM elements and how they behave in front of real users. It's a great library that I like, it's (relatively) easy to start with and it encourages good testing practices and you can also use it without Jest.

"The more your tests resemble the way your software is used, the more confidence they can give you."

So, let's start using it in the next section. By the way, you don't need to install any packages since create-react-app comes with the library and its dependencies.

1. How to create a test snapshot?

A snapshot, as the name guess, allows us to save the snapshot of a given component. It helps a lot when you update or do some refactoring, and want to get or compare the change.

Now, let's take a snapshot of the App.js file.

App.test.js

import React from 'react'
import {render, cleanup} from '@testing-library/react'
import App from './App'

 afterEach(cleanup)

 it('should take a snapshot', () => {
    const { asFragment } = render(<App />)

    expect(asFragment(<App />)).toMatchSnapshot()
   })
});

To take a snapshot, we first have to import render and cleanup. These two methods will be used a lot throughout this article. render, as you might guess helps to render a React component. And cleanup is passed as a parameter to afterEach to just clean up everything after each test to avoid memory leaks.

Next, we can now render the App component with render and get back asFragment as a returned value from the method. And finally, expect that the fragment of the App component will match the snapshot.

Now, to run the test, open your terminal and navigate to the root of the project and run the following command:

  yarn test

Or, if you use npm:

  npm test

As a result, it will create a new folder __snapshots__ and a file App.test.js.snap in the src which will look like this:

App.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Take a snapshot should take a snapshot 1`] = `
<DocumentFragment>
  <div class="App">
    <h1>Testing</h1>
  </div>
</DocumentFragment>
`

And if you make another change in App.js, the test will fail, because the snapshot will no longer match the condition. To make it passes, just press u to update it. And you'll have the updated snapshot in App.test.js.snap.

Now, let's move on and start testing our elements.

2. Testing DOM elements

To test our DOM elements, we first have to look at TestElements.js file.

TestElements.js

import React from "react"

const TestElements = () => {
  const [counter, setCounter] = React.useState(0)

  return (
    <>
      <h1 data-testid="counter">{counter}</h1>
      <button data-testid="button-up" onClick={() => setCounter(counter + 1)}>
        {" "}
        Up
      </button>
      <button
        disabled
        data-testid="button-down"
        onClick={() => setCounter(counter - 1)}
      >
        Down
      </button>
    </>
  )
}

export default TestElements

Here, the only thing you have to retain is data-testid. It will be used to select these elements from the test file. Now, let's write the unit test:

Test if the counter is equal to 0
TestElements.test.js

import React from "react"
import { render, cleanup } from "@testing-library/react"
import TestElements from "./TestElements"

afterEach(cleanup)

it("should equal to 0", () => {
  const { getByTestId } = render(<TestElements />)
  expect(getByTestId("counter")).toHaveTextContent(0)
})

As you can see, the syntax is quite similar to the previous test. The only difference is that we use getByTestId to select the needed elements (remember the data-testid) and check if it passed the test. In others words, we check if the text content <h1 data-testid="counter">{ counter }</h1> is equal to 0.

Test if the buttons are enabled or disabled
TestElements.test.js (add the following code block to the file)

it("should be enabled", () => {
  const { getByTestId } = render(<TestElements />)
  expect(getByTestId("button-up")).not.toHaveAttribute("disabled")
})

it("should be disabled", () => {
  const { getByTestId } = render(<TestElements />)
  expect(getByTestId("button-down")).toBeDisabled()
})

Here, as usual, we use getByTestId to select elements and check for the first test if the button has a disabled attribute. And for the second, if the button is disabled or not.

And if you save the file or run again in your terminal yarn test, the test will pass.

Congrats! your first test has passed!

Now, let's learn how to test an event in the next section.

3. Testing events

Before writing our unit tests, let's first check what the TestEvents.js looks like.

TestEvents.js

import React from "react"

const TestEvents = () => {
  const [counter, setCounter] = React.useState(0)

  return (
    <>
      <h1 data-testid="counter">{counter}</h1>
      <button data-testid="button-up" onClick={() => setCounter(counter + 1)}>
        {" "}
        Up
      </button>
      <button data-testid="button-down" onClick={() => setCounter(counter - 1)}>
        Down
      </button>
    </>
  )
}

export default TestEvents

Now, let's write the tests.

Test if the counter increments and decrements correctly when we click on buttons
TestEvents.test.js

import React from "react"
import { render, cleanup, fireEvent } from "@testing-library/react"
import TestEvents from "./TestEvents"

afterEach(cleanup)

it("increments counter", () => {
  const { getByTestId } = render(<TestEvents />)

  fireEvent.click(getByTestId("button-up"))

  expect(getByTestId("counter")).toHaveTextContent("1")
})

it("decrements counter", () => {
  const { getByTestId } = render(<TestEvents />)

  fireEvent.click(getByTestId("button-down"))

  expect(getByTestId("counter")).toHaveTextContent("-1")
})

As you can see, these two tests are very similar except the expected text content.

The first test fires a click event with fireEvent.click() to check if the counter increments to 1 when the button is clicked.

And the second one, checks if the counter decrements to -1 when the button is clicked.

fireEvent has several methods you can use to test events, feel free to dive into the documentation.

Now, we know how to test events, let's move on and learn in the next section how to deal with asynchronous actions.

4. Testing asynchronous actions

An asynchronous action is something that can take time to complete. It can be an HTTP request, a timer, etc.

Now, let's check the TestAsync.js file.

TestAsync.js

import React from "react"

const TestAsync = () => {
  const [counter, setCounter] = React.useState(0)

  const delayCount = () =>
    setTimeout(() => {
      setCounter(counter + 1)
    }, 500)

  return (
    <>
      <h1 data-testid="counter">{counter}</h1>
      <button data-testid="button-up" onClick={delayCount}>
        {" "}
        Up
      </button>
      <button data-testid="button-down" onClick={() => setCounter(counter - 1)}>
        Down
      </button>
    </>
  )
}

export default TestAsync

Here, we use setTimeout() to delay the incrementing event by 0.5s.

Test if the counter is incremented after 0.5s.
TestAsync.test.js

import React from "react"
import {
  render,
  cleanup,
  fireEvent,
  waitForElement,
} from "@testing-library/react"
import TestAsync from "./TestAsync"

afterEach(cleanup)

it("increments counter after 0.5s", async () => {
  const { getByTestId, getByText } = render(<TestAsync />)

  fireEvent.click(getByTestId("button-up"))

  const counter = await waitForElement(() => getByText("1"))

  expect(counter).toHaveTextContent("1")
})

To test the incrementing event, we first have to use async/await to handle the action because as I said earlier, it takes time to complete.

Next, we use a new helper method getByText() which is similar to getByTestId(), except that getByText() select the text content instead of id or data-testid i should say.

Now, after clicking to the button, we wait for the counter to be incremented with waitForElement(() => getByText('1')). And once the counter incremented to 1, we can now move to the condition and check if the counter is effectively equal to 1.

That being said, let's now move to more complex test cases.

Are you ready?

5. Testing React Redux

If you're new to React Redux, this article might help you. Otherwise, let's check what the TestRedux.js looks like.

TestRedux.js

import React from "react"
import { connect } from "react-redux"

const TestRedux = ({ counter, dispatch }) => {
  const increment = () => dispatch({ type: "INCREMENT" })
  const decrement = () => dispatch({ type: "DECREMENT" })

  return (
    <>
      <h1 data-testid="counter">{counter}</h1>
      <button data-testid="button-up" onClick={increment}>
        Up
      </button>
      <button data-testid="button-down" onClick={decrement}>
        Down
      </button>
    </>
  )
}

export default connect(state => ({ counter: state.count }))(TestRedux)

And for the reducer.

store/reducer.js

export const initialState = {
  count: 0,
}

export function reducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return {
        count: state.count + 1,
      }
    case "DECREMENT":
      return {
        count: state.count - 1,
      }
    default:
      return state
  }
}

As you can see, there is nothing fancy it's just a basic Counter Component handled by React Redux.

Now, let's write the unit tests.

Test if the initial state is equal to 0
TestRedux.test.js

import React from "react"
import { createStore } from "redux"
import { Provider } from "react-redux"
import { render, cleanup, fireEvent } from "@testing-library/react"
import { initialState, reducer } from "../store/reducer"
import TestRedux from "./TestRedux"

const renderWithRedux = (
  component,
  { initialState, store = createStore(reducer, initialState) } = {}
) => {
  return {
    ...render(<Provider store={store}>{component}</Provider>),
    store,
  }
}

afterEach(cleanup)

it("checks initial state is equal to 0", () => {
  const { getByTestId } = renderWithRedux(<TestRedux />)
  expect(getByTestId("counter")).toHaveTextContent("0")
})

There are a couple of things we need to import to test React Redux. And here, we create our own helper function renderWithRedux() to render the component since it will be used several times.

renderWithRedux() receives as parameters the component to render, the initial state and the store. If there is no store, it will create a new one, and if it doesn't receive an initial state or a store, it returns an empty object.

Next, we use render() to render the component and pass the store to the Provider.

That being said, we can now pass the component TestRedux to renderWithRedux() to test if the counter is equal to 0.

Test if the counter increments and decrements correctly.
TestRedux.test.js (add the following code block to the file)

it("increments the counter through redux", () => {
  const { getByTestId } = renderWithRedux(<TestRedux />, {
    initialState: { count: 5 },
  })
  fireEvent.click(getByTestId("button-up"))
  expect(getByTestId("counter")).toHaveTextContent("6")
})

it("decrements the counter through redux", () => {
  const { getByTestId } = renderWithRedux(<TestRedux />, {
    initialState: { count: 100 },
  })
  fireEvent.click(getByTestId("button-down"))
  expect(getByTestId("counter")).toHaveTextContent("99")
})

To test the incrementing and decrementing events, we pass an initial state as a second argument to renderWithRedux(). Now, we can click on the buttons and test if the expected result matches the condition or not.

Now, Let's move to the next section and introduce React Context.

React Router and Axios will come next, Are you still with me?

6. Testing React Context

If you're new to React Context, check this article first. Otherwise, let's check the TextContext.js file.

TextContext.js

import React from "react"

export const CounterContext = React.createContext()

const CounterProvider = () => {
  const [counter, setCounter] = React.useState(0)
  const increment = () => setCounter(counter + 1)
  const decrement = () => setCounter(counter - 1)

  return (
    <CounterContext.Provider value={{ counter, increment, decrement }}>
      <Counter />
    </CounterContext.Provider>
  )
}

export const Counter = () => {
  const { counter, increment, decrement } = React.useContext(CounterContext)
  return (
    <>
      <h1 data-testid="counter">{counter}</h1>
      <button data-testid="button-up" onClick={increment}>
        {" "}
        Up
      </button>
      <button data-testid="button-down" onClick={decrement}>
        Down
      </button>
    </>
  )
}

export default CounterProvider

Now, the counter state is managed through React Context. Let's write the unit test to check if it behaves as expected.

Test if the initial state is equal to 0
TextContext.test.js

import React from "react"
import { render, cleanup, fireEvent } from "@testing-library/react"
import CounterProvider, { CounterContext, Counter } from "./TestContext"

const renderWithContext = component => {
  return {
    ...render(
      <CounterProvider value={CounterContext}>{component}</CounterProvider>
    ),
  }
}

afterEach(cleanup)

it("checks if initial state is equal to 0", () => {
  const { getByTestId } = renderWithContext(<Counter />)
  expect(getByTestId("counter")).toHaveTextContent("0")
})

As the previous section with React Redux, here we use the same approach, by creating a helper function renderWithContext() to render the component. But this time, it receives only the component as a parameter. And to create a new context, we pass CounterContext to the Provider.

Now, we can test if the counter is initially equal to 0 or not.

Test if the counter increments and decrements correctly.
TextContext.test.js (add the following code block to the file)

it("increments the counter", () => {
  const { getByTestId } = renderWithContext(<Counter />)

  fireEvent.click(getByTestId("button-up"))
  expect(getByTestId("counter")).toHaveTextContent("1")
})

it("decrements the counter", () => {
  const { getByTestId } = renderWithContext(<Counter />)

  fireEvent.click(getByTestId("button-down"))
  expect(getByTestId("counter")).toHaveTextContent("-1")
})

As you can see, here we fire a click event to test if the counter increments correctly to 1 and decrement to -1.

That being said, we can now move to the next section and introduce React Router.

7. Testing React Router

If you want to dive into React Router, this article might help you. Otherwise, let's check the TestRouter.js file.

TestRouter.js

import React from "react"
import { Link, Route, Switch, useParams } from "react-router-dom"

const About = () => <h1>About page</h1>

const Home = () => <h1>Home page</h1>

const Contact = () => {
  const { name } = useParams()
  return <h1 data-testid="contact-name">{name}</h1>
}

const TestRouter = () => {
  const name = "John Doe"
  return (
    <>
      <nav data-testid="navbar">
        <Link data-testid="home-link" to="/">
          Home
        </Link>
        <Link data-testid="about-link" to="/about">
          About
        </Link>
        <Link data-testid="contact-link" to={`/contact/${name}`}>
          Contact
        </Link>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/about:name" component={Contact} />
      </Switch>
    </>
  )
}

export default TestRouter

Here, we have some components to render when navigating and the Home page.

Now, let's write the tests

TestRouter.test.js

import React from "react"
import { Router } from "react-router-dom"
import { render, fireEvent } from "@testing-library/react"
import { createMemoryHistory } from "history"
import TestRouter from "./TestRouter"

const renderWithRouter = component => {
  const history = createMemoryHistory()
  return {
    ...render(<Router history={history}>{component}</Router>),
  }
}

it("should render the home page", () => {
  const { container, getByTestId } = renderWithRouter(<TestRouter />)
  const navbar = getByTestId("navbar")
  const link = getByTestId("home-link")

  expect(container.innerHTML).toMatch("Home page")
  expect(navbar).toContainElement(link)
})

To test React Router, we have to first have a navigation history to start with. Therefore we use createMemoryHistory() to well as the name guessed to create a navigation history.

Next, we use our helper function renderWithRouter() to render the component and pass history to the Router component. With that, we can now test if the page loaded at the starting is the Home page or not. And if the navigation bar is loaded with the expected links.

Test if it navigates to other pages with the parameters when we click on links
TestRouter.test.js (add the following code block to the file)

it("should navigate to the about page", () => {
  const { container, getByTestId } = renderWithRouter(<TestRouter />)

  fireEvent.click(getByTestId("about-link"))

  expect(container.innerHTML).toMatch("About page")
})

it("should navigate to the contact page with the params", () => {
  const { container, getByTestId } = renderWithRouter(<TestRouter />)

  fireEvent.click(getByTestId("contact-link"))

  expect(container.innerHTML).toMatch("John Doe")
})

Now, to check if the navigation works, we have to fire a click event on the navigation links.

For the first test, we check if the content is equal to the text in the About Page, and for the second, we test the routing params and check if it passed correctly.

We can now move to the final section and learn how to test an Axios request.

We've almost done

8. Testing HTTP Request

As usual, let's first see what the TextAxios.js file looks like.

TextAxios.js

import React from "react"
import axios from "axios"

const TestAxios = ({ url }) => {
  const [data, setData] = React.useState()

  const fetchData = async () => {
    const response = await axios.get(url)
    setData(response.data.greeting)
  }

  return (
    <>
      <button onClick={fetchData} data-testid="fetch-data">
        Load Data
      </button>
      {data ? (
        <div data-testid="show-data">{data}</div>
      ) : (
        <h1 data-testid="loading">Loading...</h1>
      )}
    </>
  )
}

export default TestAxios

As you can see here, we have a simple component that has a button to make a request. And if the data is not available, it will display a loading message.

Now, let's write the tests.

Test if the data are fetched and displayed correctly.
TextAxios.test.js

import React from "react"
import { render, waitForElement, fireEvent } from "@testing-library/react"
import axiosMock from "axios"
import TestAxios from "./TestAxios"

jest.mock("axios")

it("should display a loading text", () => {
  const { getByTestId } = render(<TestAxios />)

  expect(getByTestId("loading")).toHaveTextContent("Loading...")
})

it("should load and display the data", async () => {
  const url = "/greeting"
  const { getByTestId } = render(<TestAxios url={url} />)

  axiosMock.get.mockResolvedValueOnce({
    data: { greeting: "hello there" },
  })

  fireEvent.click(getByTestId("fetch-data"))

  const greetingData = await waitForElement(() => getByTestId("show-data"))

  expect(axiosMock.get).toHaveBeenCalledTimes(1)
  expect(axiosMock.get).toHaveBeenCalledWith(url)
  expect(greetingData).toHaveTextContent("hello there")
})

This test case is a bit different because we have to deal with an HTTP request. And to do that, we have to mock axios request with the help of jest.mock('axios').

Now, we can use axiosMock and apply a get() method to it and finally use the Jest function mockResolvedValueOnce() to pass the mocked data as a parameter.

With that, we can now for the second test, click to the button to fetch the data and use async/await to resolve it. And now we have to test 3 things:

If the HTTP request has been done correctly
If the HTTP request has been done with the url
If the data fetched matches the expectation.

And for the first test, we just check if the loading message is displayed when we have no data to show.

That being said, we've now done with the 8 simple steps to start testing your React Apps.

Don't be scared anymore with testing

Final Thoughts

React Testing Library is a great package for testing React Apps. It gives us access to jest-dom matchers we can use to test our components more efficiently and with good practices. Hopefully, this article was useful, and that will help you building robust React apps in the future.

You can find the finished project here

Thanks for reading it!

Next Steps

React Testing Library docs

React Testing Library Cheatsheet

Jest DOM matchers cheatsheet

Jest Docs

How to build an Event Booking App using HTML, CSS, JavaScript, and Firebase

Mon, 02 Mar 2020 19:34:00 GMT

In this tutorial, we are going to build an Event Booking App with HTML, CSS, JavaScript, and Firebase.

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Plan our app
Markup
Styling
Interact With Firebase
Show and Update Data with JavaScript

Plan our app

We are not going to build a complete event booking app with all the functionalities. It's not relevant to cover everything in just one tutorial, I just want to keep things simple and easy to digest, maybe the authentication part will be covered in a separate article.

So, our Event Booking App will have the following functionalities:

The user can create an event and store it to Firestore.
The user can fetch all events in real-time.
The user can book an event.
The user can't book an event more than once.

Now, we know what our app will look like, let's start building it in the next section.

Markup

Our HTML file will be relatively simple. We will hold our navigation bar and the latest event in the header tag.

In index.html

<body>
  <header id="home">
    <nav class="navbar">
      <h1>Eventic</h1>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#events">Events</a></li>
        <li><a href="#add-event">New Event</a></li>
      </ul>
    </nav>
    <div class="welcome-event"></div>
  </header>
  <main>
    <section id="events">
      <h1 class="section-title">Events</h1>
      <div class="events-container"></div>
    </section>
    <section id="add-event">
      <h1 class="section-title">New Event</h1>
      <form class="form">
        <input type="text" id="name" placeholder="Name" />
        <input type="number" id="attendee" placeholder="Attendees" />
        <textarea
          id="description"
          cols="30"
          rows="10"
          placeholder="Description..."
        ></textarea>
        <select id="status">
          <option value="0">Free</option>
          <option value="1">Paid</option>
        </select>
        <button class="btn btn-primary">Save</button>
      </form>
    </section>
  </main>
</body>

Next, the main tag will wrap the list of events and the form which enables us to create a new event.

The events will be displayed later with the help of JavaScript.

In index.html

<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-firestore.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  const db = firebase.firestore()
</script>

<script src="db.js"></script>
<script src="app.js"></script>

</body>
</html>

Next, we need to connect our app to Firebase to be able to store our data.

To have these credentials, you will need to create a new app in the Firebase Console. And once the project created, click on the code icon </> that sits next to the IOS and Android icons to register your app.

Now, to generate the credentials, you have to register the name of your app. And finally, put the credentials in the HTML file as I do here.

Next, duplicate the first script tag and change firebase-app.js to firebase-firestore.js because we will use Firestore in this project.

Then, initialize firebase with the configuration and declare a db variable that will be used later to interact with Firebase.

Now, we have our markup and successfully linked our project to Firebase, let's start styling it in the next section.

Styling

The CSS file is a bit long, therefore I won't cover everything in this post, I will just highlight the most important parts. However, no worries, you will find the source code at the end of the article.

As usual, we start by importing our font and do some resets to prevent the default behavior.

In style.css

@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");

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

html {
  --primary-color: #e74c3c;
  --secondary-color: #222;
  --tertiary-color: #333;
  --light-color: #fff;
  scroll-behavior: smooth;
}

body {
  background-color: #1f1f1f;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  color: var(--light-color);
  line-height: 1.6;
}

Next, we use CSS Variables to store our colors and set the scroll-behavior to smooth to just have a nice scrolling effect when the user clicks in the navbar links.

However, be careful with the scroll-behavior, it's not supported by all browsers. You can still handle the browsers compatibility here.

In style.css

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2.5rem;
  z-index: 100;
  width: 100%;
  transition: background 0.3s;
  position: fixed;
  top: 0;
  left: 0;
}

nav ul {
  display: flex;
  list-style: none;
}

nav li:not(:last-child),
.welcome-event div span {
  margin-right: 1.5rem;
}

For the navbar, by default, the background will be transparent, and for better usability, it will change when the user starts scrolling.

Our Event Booking App starts to taking shape, now, let's start implementing Firebase and connect our app to Firestore.

Interact With Firebase

Firebase is a platform that handles everything related to the back-end for us, the only thing, we have to do is connecting our app to it and start using the database or other services.

Firestore is a NoSQL database, it's non-relational and uses documents, collections, etc. to create the database.

Now, let's connect to Firestore and create our very first database.

Fetch events

Earlier in this tutorial, we had declared a variable db in the HTML part. Now, let's use that variable to connect our app to Firestore.

I will put everything related to the database on the db.js file to just have a more clean structure.

In db.js

db.collection("events").onSnapshot(snapshot => {
  // Handle the latest event
  const newestEvent = snapshot.docChanges()[0].doc.data()
  const id = snapshot.docChanges()[0].doc.id
  showLatestEvent(newestEvent, id)

  // delete the latest event element
  snapshot.docChanges().shift()

  snapshot.docChanges().forEach(event => {
    showEvents(event.doc.data(), event.doc.id)
  })
})

With the help of db, we can now access our collection events. It's just the name of our database, and if it doesn't exist, Firestore will create it on the fly for us.

The collection object has a very handy method called onSnapshot(). It helps to listen in real-time to the database, which that means, whenever a change occurs on it, it will react and returns us the change in real-time.

The onSnapshot() method will also help us to access to the document (our data). And now, we can extract the latest event to show on the header. And, before looping through the events array, delete the latest event to just not display it again.

Now, to display the events on the UI, we have to call our needed functions showLatestEvent() and showEvents(), then, pass to them as parameter the event and the id.

We can now fetch the events from Firestore, however, we still not have events to show. Let's store our very first event in our database.

Create an event

To get the values entered by the user, we have to first select the form tag and use it to pick the id of each input and pull the value entered.

In db.js

const addNewEvent = () => {
  const event = {
    name: form.name.value,
    attendee: form.attendee.value,
    booked: 0,
    description: form.description.value,
    status: parseInt(form.status.value, 10),
  }
  db.collection("events")
    .add(event)
    .then(() => {
      // Reset the form values
      ;(form.name.value = ""),
        (form.attendee.value = ""),
        (form.description.value = ""),
        (form.status.value = "")

      alert("Your event has been successfully saved")
    })
    .catch(err => console.log(err))
}

The db variable (remember it's the reference to firebase.firestore()) has another method to save data to Firestore, the save() function. It's a promise, and once it's complete, we can now reset the values of the form and show a success message to the user.

Now, let's move on and handle the case when the user wants to book an event.

Book an event

As I said earlier, we can't check if the user is authenticated or not, hence, he can potentially book an event more than once.

So to handle it, I will use localStorage to prevent booking duplication.

In db.js

let bookedEvents = []

const bookEvent = (booked, id) => {
  const getBookedEvents = localStorage.getItem("booked-events")

  if (getBookedEvents) {
    bookedEvents = JSON.parse(localStorage.getItem("booked-events"))
    if (bookedEvents.includes(id)) {
      alert("Seems like you have already booked this event")
    } else {
      saveBooking(booked, id)
    }
  } else {
    saveBooking(booked, id)
  }
}

const saveBooking = (booked, id) => {
  bookedEvents.push(id)
  localStorage.setItem("booked-events", JSON.stringify(bookedEvents))

  const data = { booked: booked + 1 }
  db.collection("events")
    .doc(id)
    .update(data)
    .then(() => alert("Event successfully booked"))
    .catch(err => console.log(err))
}

And as you can see here, we first check if the event id is stored or not in the localStorage. If it's the case, the user can't book the same event again, otherwise, he will be able to book the event.

And to update the booking counter, we use again db to update the event on Firestore.

The db.js file is now complete, So, let's move to the final part and connect our project to db.js

Show and Update Data with JavaScript

As usual, we start by selecting the needed elements.

const eventsContainer = document.querySelector(".events-container")
const nav = document.querySelector("nav")
const welcomeEvent = document.querySelector(".welcome-event")
const form = document.querySelector(".form")

const showEvents = (event, id) => {
  const { name, attendee, status, description, booked } = event

  const eventStatus = status === 0 ? "free" : "paid"
  const output = `
        <div class="card">
          <div class="card--details">
            <div>
              <h1>${name}</h1>
              <span>${attendee - booked} attendees</span>
            </div>
            <span class="card--details-ribbon ribbon-${eventStatus}">
                ${eventStatus}
            </span>
             <p>${description}</p>
            <button onclick="bookEvent(${booked} ,'${id}')" class="btn btn-tertiary">Book</button>
          </div>
        </div>
        `
  eventsContainer.innerHTML += output
}

Earlier in this article, we had passed as a parameter to the showEvents() function the event fetched from Firestore in the db.js file.

We can now pull the values held on the event object, and display it. And, when the user clicks on the button to book an event, we will call the bookEvent() function to handle it.

const showLatestEvent = (latestEvent, id) => {
  const { name, attendee, status, description, booked } = latestEvent
  // Get the first event
  welcomeEvent.innerHTML = `
    <h1>${name}</h1>
    <p>${
      description.length >= 100
        ? `${description.substring(0, 100)}...`
        : description
    }</p>
    <div>
      <span>Attendees: ${attendee - booked}</span>
      <span>Status: ${status === 0 ? "free" : "paid"}</span>
     </div>
     <button onclick="bookEvent(${booked} ,'${id}')" class="btn btn-tertiary">Book</button>
    `
}

form.addEventListener("submit", e => {
  e.preventDefault()
  addNewEvent()
})

window.onscroll = () => {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    nav.style.background = "var(--tertiary-color)"
    nav.style.boxShadow = "0 10px 42px rgba(25,17,34,.1)"
  } else {
    nav.style.background = "none"
    nav.style.boxShadow = "none"
  }
}

As you can see, the showLatestEvent() method is quite similar to showEvents(), unlike the element used to display the event.

And, when the description is a bit long, we use substring() to truncate the value.

Next, we listen to the form element to handle the submit event and store it to Firestore with addNewEvent().

And to make everything looking nice, when the user scrolls, we add a background color and a box-shadow to the navigation bar.

With that change, we have now our Event booking App using JavaScript and Firebase.

That being said, Thanks for reading this article.

You can check it live here or find the Source Code here.

Subscribe to my newsletter - Follow me on twitter

How to lift your React App performance using Lazy Loading?

Fri, 21 Feb 2020 20:01:00 GMT

React, as you already know is a JavaScript a library for building user interfaces. And when we develop React apps, we build a lot of components that will be bundled into one file at the end. Depending on the size of our files and third-party libraries it can be really big, even if the building part will minify it and reduce the size. However, that bundle size can be optimized again with a technic called Lazy Loading.

In this tutorial, we will learn how to lift a React App performance using Lazy Loading.

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Prerequisites

This tutorial assumes that you have at least a basic to mid-level knowledge of React and React Router, I will only focus on the Lazy Loading part.

If you need to get started with the React Router, this tutorial might help you, otherwise, let's do the prerequisites.

To be able to follow along, you'll have to clone the repo of the project by running in your terminal:

git clone https://github.com/ibrahima92/prep-react-lazy-loading

And run npm install in your terminal to install the dependencies.

Then, If you've done with the prerequisites, let's start loading our components lazily.

What is Lazy Loading?

Lazy loading or code splitting is the ability to defer the loading of a chunk of code. That means, instead of bundling and load all the code when the page loads, just the needed code will be loaded, and some parts will be loaded whenever it's needed.

When do we need Lazy Loading?

Code splitting is useful for medium size to larger React apps. Even in some medium-size apps, we don't need lazy loading.

If you have some parts of your app where most of your users won't visit, it makes sense to load it lazily instead of increasing your bundle size and hence, decreasing the performance of your app.

In this tiny project, lazy loading is overkill, to be honest, but it's always much simpler to learn how to do these kinds of things with a mini-project.

Now, let's start loading our component lazily.

How to lazy load a component?

Before React 16.6, Lazy loading was done either with Higher-Order Component (HOC) or a library. Now, loading a component lazily is much easier with React lazy and React Suspense. However, React Lazy doesn't support named exports and server-side rendering.

It's also good to know that Code Splitting is an advanced concept, and some bundlers don't support it. create-react-app has a really good and modern configuration, use it as possible as you can.

So, let's update the App.js file a bit to see them in action.

In App.js

import React, { lazy, Suspense } from "react"
import { BrowserRouter, Route, Switch } from "react-router-dom"

import NavBar from "./components/NavBar"
import Posts from "./components/Posts/Posts"
const Users = lazy(() => import("./components/Users/Users"))

function App() {
  return (
    <BrowserRouter>
      <main>
        <NavBar />
        <Switch>
          <Route exact path="/" component={Posts} />
          <Route
            path="/users"
            render={() => (
              <Suspense fallback={<h1>Loading....</h1>}>
                <Users />
              </Suspense>
            )}
          />
        </Switch>
      </main>
    </BrowserRouter>
  )
}

export default App

As you can see here, we start by importing lazy and Suspense from the React library. Then, instead of importing the Users component, we use lazy to be able to defer it and import the needed component dynamically when needed.

With that change and the help of Suspense, we can now use the render props provided by React Router to display the component once imported and if it takes time to load, it will use the fallback to show a loading message.

By the way, for the fallback property you're not limited to a simple message you can use a spinner component, loading indicator, etc.

Now, to see what's changed you need to open your browser devtools and check the Network tab, then, you'll see that when you click on the Users page, a new chunk of data will be loaded.

With that change, we have now successfully loaded a component lazily using React Lazy and React Suspense.

Conclusion

Lazy Loading is a good way to increase performance in a React App. It's really useful in some cases and definitely, something to know and use, however, using it when not needed can cause some performance issues.

Photo by Kate Stone Matheson on Unsplash

A Complete Beginner's Guide to React Router (including Router Hooks)

Mon, 17 Feb 2020 13:10:00 GMT

React is a JavaScript library for building user interfaces. We can also extend it to build Multi-page applications with the help of React Router. It's a third-party library that enables routing in our React apps.

In this tutorial, we are going to cover everything you need to know to get started with React Router.

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Setting up the project
What is routing?
Setting up the router
Rendering routes
Using Links to switch pages
Passing Route parameters
Navigating programmatically
Redirecting to another page
Redirecting to 404 page
Guarding routes
Router Hooks (useHistory, useParams, useLocation)
Final Thoughts
Next Steps

Setting up the project

To be able to follow along, you will need to create a new react app, by running this following command in your terminal:

npx create-react-app react-router-guide

Then, add these lines of code to the App.js file.

In App.js

import React from "react"
import "./index.css"

export default function App() {
  return (
    <main>
      <nav>
        <ul>
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
        </ul>
      </nav>
    </main>
  )
}
// Home Page
const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
)
// About Page
const About = () => (
  <Fragment>
    <h1>About</h1>
    <FakeText />
  </Fragment>
)
// Contact Page
const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
)

const FakeText = () => (
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
)

Then, if you're ready to go, let's start by answering an important question: what is routing?

What is routing?

Routing is the capacity to show different pages to the user. That means it gives the ability to move between different parts of an application by entering a URL or clicking on an element.

As you already know, by default, React comes without routing. And to enable it in our project, we need to add a library named react-router.

To install it, you will have to run the following command in your terminal:

yarn add react-router-dom

npm install react-router-dom

Now, we've successfully installed our router, let's start using it in the next section.

Setting up the router

To enable routing in our React app, we first need to import BrowserRouter from react-router-dom.

In App.js

import React, { Fragment } from "react"
import "./index.css"

import { BrowserRouter as Router } from "react-router-dom"
export default function App() {
  return (
    <Router>      <main>        <nav>          <ul>            <li>              <a href="/">Home</a>            </li>            <li>              <a href="/about">About</a>            </li>            <li>              <a href="/contact">Contact</a>
            </li>
          </ul>
        </nav>
      </main>
    </Router>
  )
}

It should hold everything in our app where routing is needed. That means, if we need routing in our entire app, we must wrap our higher component with BrowserRouter.

By the way, You don't have to rename BrowserRouter as Router as I do here, I just want to keep things readable.

A router only, doesn't do much, let's add a route in the next section.

Rendering routes

To render routes, we have to import the Route component from the router package.

In App.js

import React, { Fragment } from "react"
import "./index.css"

import { BrowserRouter as Router, Route } from "react-router-dom"
export default function App() {
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>            <li>
              <a href="/contact">Contact</a>
            </li>
          </ul>
        </nav>
        <Route path="/" render={() => <h1>Welcome!</h1>} />
      </main>
    </Router>
  )
}

Then, add it where we want to render the content. The Route component has several properties. But here, we just need path and render.

path: It's the path of the route. Here, we use / to define the path of the home page.
render: It will display the content whenever the route is reached. Here, we'll render a welcome message to the user.

In some cases serving routes like that is perfectly fine, but imagine the case when we have to deal with a real component, using render may not be the right solution.

So, how can we do to display a real component? Well, the Route component has another property named component.

Let's update our example a bit to see it in action.

In App.js

import React, { Fragment } from "react"
import "./index.css"

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

export default function App() {
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>
            <li>              <a href="/contact">Contact</a>
            </li>
          </ul>
        </nav>

        <Route path="/" component={Home} />
      </main>
    </Router>
  )
}

const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
)

Now, instead of rendering a message, our route will load the Home component.

To get the full power of React Router, we need to have multiple pages and links to play with. We already have pages (components if you want too), now, let's add some links to be able to switch between pages.

Using Links to switch pages

To add links to our project, we will use the React Router again.

In App.js

import React, { Fragment } from "react"
import "./index.css"

import { BrowserRouter as Router, Route, Link } from "react-router-dom"
export default function App() {
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/about">About</Link>            </li>            <li>              <Link to="/contact">Contact</Link>            </li>          </ul>        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </main>
    </Router>
  )
}

const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
)

const About = () => (
  <Fragment>
    <h1>About</h1>
    <FakeText />
  </Fragment>
)

const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
)

After importing Link, we have to update our navigation bar a bit. Now, instead of using a tag and href, React Router uses Link and to to, well, be able to switch between pages without reloading it.

Then, we need to add two new routes: About and Contact to be able to switch between pages or components if you want too.

Now, we can go to different parts of our app through links. But, there is an issue with our router though, the Home component is always displayed even if we switch to other pages.

The reason for that is the React Router will check if the path defined starts with / if it's the case, it will render the component. And here, our first route starts with /, therefore the Home component will be rendered each time.

However, we can still change the default behavior by adding the exact property to Route.

In App.js

<Route path="/" exact component={Home} />

By updating the Home route with exact, now, it will be rendered only if it matches the full path.

We can still enhance it, by wrapping our routes with Switch to tell to React Router to load only one route at a time.

In App.js

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"
;<Switch>
  <Route path="/" exact component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

Now, we have new links, let's use them to pass parameters.

Passing Route parameters

To pass data between pages, we have to update our example.

In App.js

import React, { Fragment } from "react"
import "./index.css"

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"

export default function App() {
  const name = "John Doe"  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>            </li>            <li>              <Link to={`/about/${name}`}>About</Link>            </li>            <li>              <Link to="/contact">Contact</Link>            </li>          </ul>        </nav>        <Switch>          <Route path="/" exact component={Home} />          <Route path="/about/:name" component={About} />          <Route path="/contact" component={Contact} />        </Switch>      </main>    </Router>  )}const Home = () => (  <Fragment>    <h1>Home</h1>    <FakeText />  </Fragment>)
const About = ({
  match: {
    params: { name },
  },
}) => (
  // props.match.params.name
  <Fragment>
    <h1>About {name}</h1>
    <FakeText />
  </Fragment>
)

const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
)

As you can see here, we start by declaring a new constant name which will be passed as a parameter to the About page. And, we append name to the corresponding link.

With that, we have now to update the About route, by adjusting its path to receive name as a parameter path="/about/:name".

Now, the parameter will be received as props from the About component, and the only thing we have to do now is destructuring the props and get back the name property. By the way, {match:{params:{name}}} is the same as props.match.params.name.

Until now, we've done a lot, however, in some cases, we don't want to use links to navigate between pages.

Sometimes, we have to wait for an operation to finish before navigating to the next page.

So, let's handle that case in the next section.

Navigating programmatically

The props we receive has some convenient methods we can use to navigate between pages.

In App.js

const Contact = ({ history }) => (
  <Fragment>
    <h1>Contact</h1>
    <button onClick={() => history.push("/")}>Go to home</button>
    <FakeText />
  </Fragment>
)

Here, we pull the history object from the props we receive. It has some handy methods like goBack, goForward, etc. But here, we will use the push method to be able to go to the Home page.

Now, let's handle the case when we want to redirect our user after an action.

Redirecting to another page

The React Router has another component named Redirect, and as you guessed, it helps us to redirect the user to another page

In App.js

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect,
} from "react-router-dom"

const About = ({
  match: {
    params: { name },
  },
}) => (
  // props.match.params.name
  <Fragment>
    {name !== "John Doe" ? <Redirect to="/" /> : null}
    <h1>About {name}</h1>
    <FakeText />
  </Fragment>
)

Now, if the name passed as a parameter is not equal to John Doe, the user will be redirected to the home page.

You could argue why I don't redirect the user with props.history.push('/)? Well, the Redirect component replaces the page and therefore the user can't go back to the previous page, but, with the push method, he can. However, you can use props.history.replace('/) to mimic the Redirect behavior.

Now, let's move on and handle the case when the user hits a route that doesn't exist.

Redirecting to 404 page

To redirect the user, to a 404 page, you can create a component to show it, but here to keep things simple, I will just display a message with render.

import React, { Fragment } from "react"
import "./index.css"

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"

export default function App() {
  const name = "John Doe"

  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to={`/about/${name}`}>About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>        </nav>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about/:name" component={About} />
          <Route path="/contact" component={Contact} />
          <Route render={() => <h1>404: page not found</h1>} />
        </Switch>
      </main>
    </Router>
  )
}

The new route we've added will catch every path that doesn't exist and redirect the user to the 404 page.

Now, let's move on and learn how to protect our routes in the next section.

Guarding routes

There are many ways to protect routes to React. But, here I will just check if the user is authenticated and redirect him to the appropriate page.

import React, { Fragment } from "react"
import "./index.css"

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"

export default function App() {
  const name = "John Doe"
  const isAuthenticated = false  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to={`/about/${name}`}>About</Link>
            </li>
            <li>              <Link to="/contact">Contact</Link>            </li>          </ul>        </nav>        <Switch>          <Route path="/" exact component={Home} />          {isAuthenticated ? (            <>
              <Route path="/about/:name" component={About} />
              <Route path="/contact" component={Contact} />
            </>
          ) : (
            <Redirect to="/" />
          )}
        </Switch>
      </main>
    </Router>
  )
}

As you can see here, I declared a variable to mimic authentication. Then, check if the user is authenticated or not. If it's the case, render protected pages, else redirect him to the home page.

We've covered a lot until now, but it remains an interesting part: The router hooks.

let's move to the final section and introduce Hooks.

Router Hooks (useHistory, useParams, useLocation)

The router hooks make things much easier. Now, access to the history, location or parameters is done in an easy and elegant way.

useHistory

The useHistory hook gives us access to the history instance without pull it from props.

import { useHistory } from "react-router-dom"
const Contact = () => {
  const { history } = useHistory()  return (
    <Fragment>
      <h1>Contact</h1>
      <button onClick={() => history.push("/")}>Go to home</button>
    </Fragment>
  )
}

useParams

It helps us get the parameter passed on the URL without using the props object.

import {  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  useParams,
} from "react-router-dom"

export default function App() {
  const name = "John Doe"
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to={`/about/${name}`}>About</Link>
            </li>
          </ul>
        </nav>
        <Switch>          <Route path="/" exact component={Home} />
          <Route path="/about/:name" component={About} />
        </Switch>
      </main>
    </Router>
  )
}

const About = () => {
  const { name } = useParams()
  return (
    // props.match.params.name
    <Fragment>
      {name !== "John Doe" ? <Redirect to="/" /> : null}
      <h1>About {name}</h1>
      <Route component={Contact} />
    </Fragment>
  )
}

useLocation

It returns the location object that represents the current URL.

import { useLocation } from "react-router-dom"
const Contact = () => {
  const { pathname } = useLocation()
  return (
    <Fragment>
      <h1>Contact</h1>
      <p>Current URL: {pathname}</p>
    </Fragment>
  )
}

Final Thoughts

The React Router is an amazing library that helps us go from a single page to a multi-page application feeling (At the end of the day, it's still a single page) with great usability. And now with the router hooks, you've seen by your own how easy and elegant they are, definitely something to consider in your next project.

Next Steps

React Router Documentation

Photo by Joshua Sortino on Unsplash

Build a search filter with JavaScript

Tue, 11 Feb 2020 19:04:00 GMT

In this tutorial, we are going to build a search filter with just JavaScript. It's a cool functionality that helps to filter a list without reloading the page.

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Markup

For this quick post, I will use Taildwind CSS to not waste your time with styling.

So, we can now start with the HTML part. It's relatively simple.

In index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <title>Filterable List</title>
  </head>

  <body class="antialiased font-sans bg-gray-200">
    <main class="container m-auto max-w-2xl mt-4 p-2 sm:px-8">
      <input
        type="search"
        id="search"
        placeholder="Filter users..."
        class="appearance-none border border-gray-400 border-b block pl-8 pr-6 py-2 w-full bg-white text-sm placeholder-gray-400 rounded-lg text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none"
      />
      <div class="my-4 shadow rounded-lg overflow-hidden">
        <table class="items min-w-full leading-normal"></table>
      </div>
    </main>
    <script src="app.js"></script>
  </body>
</html>

Don't let the bunch of classes added by Tailwind CSS confusing you.

Here, there are two important things to retain:

The id search held on the input tag which will help us later get the value entered by the user and filter the list with it.
The class items held on the table tag which will be used later to append the data with JavaScript.

Now, let's move on and show the data.

Show data with JavaScript

For the data, I will use the github API to fetch users with their avatar, repositories, etc.

We start the JavaScript part by selecting items, and search. Then, we declare the users array which will as you might guess hold our users.

In app.js

const items = document.querySelector(".items")
const searchUser = document.querySelector("#search")
let users = []

const fetchImages = () => {
  fetch("https://api.github.com/users")
    .then(res => {
      res
        .json()
        .then(res => {
          users = res
          showUsers(users)
        })
        .catch(err => console.log(err))
    })
    .catch(err => console.log(err))
}

const showUsers = arr => {
  let output = ""

  arr.forEach(
    ({ login, avatar_url }) =>
      (output += `
<tr>
  <td class="py-2 pl-5 border-b border-gray-200 bg-white">
  <div class="flex items-center">
    <div class="flex-shrink-0 w-10 h-10">
      <img class="w-full h-full rounded-full" src=${avatar_url} />
    </div>
    <div class="ml-3">
      <h1 class="capitalize font-semibold text-base text-gray-900 whitespace-no-wrap">
      ${login}
      </h1>
    </div>
  </div>
  </td>
  <td class="py-2 text-center border-b border-gray-200 bg-white text-sm">
    <a class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 border border-blue-700 rounded" 
      href=https://github.com/${login}>See profile
    </a>
  </td>
</tr>
`)
  )
  items.innerHTML = output
}
document.addEventListener("DOMContentLoaded", fetchImages)

Then, we use the Fetch API to get the data and assign them to the variable users.

With that, we can now use the showUsers() function to display them on the screen.

An for the showUsers() method, we just loop through the array of data and show for each user the login and its avatar_url.

Now, the data are successfully displayed on the screen. But, we still can't use the search filter. So, let's make it filterable in the next section.

Make the list filterable

As you have seen earlier in this post, the function showUsers() helps us show the data. And that method will be used again when a change occurs on the search bar.

In app.js

searchUser.addEventListener("input", e => {
  const element = e.target.value.toLowerCase()
  const newUser = users.filter(user =>
    user.login.toLowerCase().includes(element)
  )

  showUsers(newUser)
})

And here, we use searchUser (it's the id of the input tag) to listen to the input event. That means, when the user enters something on the search bar, this function will be called.

Then, we store the value entered on element and transform it to lowercase, to well, be able to match users correctly.

And to filter the list, we check if the value entered matches an element of the array or not. Then, we pass the filtered array to display to showUsers().

And that's it, we have our search filter.

Thanks for reading it.

You can check it live here or find the source code here.

How to build a PWA from scratch with HTML, CSS, and JavaScript

Fri, 31 Jan 2020 16:45:00 GMT

Progressive web apps are a way to bring native app feeling into normal or traditional web apps. Indeed, with PWAs we can now enhance our website with mobile app features which increase a lot the usability and offer great user experience to our end-users.

In this article, we are going to build a PWA from scratch with HTML, CSS, and JavaScript. So, let's get started by an important question: What the heck is PWA?

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

What is Progressive Web App (PWA)?
Markup
Styling
Show data with JavaScript
Web App Manifest
What is Service Worker?
- Cache the assets
- Fetch the assets
Register the Service Worker
Final thoughts
Next steps

What is Progressive Web App (PWA)?

A Progressive Web App is a web app that delivers an app-like experience to users by using modern web capabilities. In the end, it's just your regular website that runs in a browser with some enhancements like the ability:

To install it on a mobile home screen
To access it when offline
To access the camera
Get push notifications
To do background synchronization

And so much more.

However, to be able to transform our traditional web app to a PWA, we have to adjust it a little bit, by adding a web app manifest file and a service worker.

Don't worry about these new terms, we'll cover them later.

But First, we have to build our web app or traditional web app if you want too. So, Let's start with the markup.

Markup

The HTML file is relatively simple. We wrap everything on the main tag.

In index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Dev'Coffee PWA</title>
  </head>
  <body>
    <main>
      <nav>
        <h1>Dev'Coffee</h1>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Blog</li>
        </ul>
      </nav>
      <div class="container"></div>
    </main>
    <script src="js/app.js"></script>
  </body>
</html>

And create a navigation bar with the nav tag. Then, the div with the class .container will hold later our cards added by JavaScript.

That being said, let's style it with CSS.

Styling

Here, as usual, we start by importing the needed font and do some resets to prevent the default behavior.

In css/style.css

@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #fdfdfd;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
}
main {
  max-width: 900px;
  margin: auto;
  padding: 0.5rem;
  text-align: center;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul {
  list-style: none;
  display: flex;
}

li {
  margin-right: 1rem;
}
h1 {
  color: #e74c3c;
  margin-bottom: 0.5rem;
}

Then, we limit the main element's maximum width to 900px, to make it look good on a large screen.

For the navbar, I want the logo to be at the left and the links at the right. Hence, for the nav tag, after making it a flex container, we use justify-content: space-between; to align them.

In css/style.css

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 1rem 0;
}
.card {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 15rem auto;
  height: 15rem;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius: 10px;
  margin: auto;
  overflow: hidden;
}
.card--avatar {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}
.card--title {
  color: #222;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}
.card--link {
  text-decoration: none;
  background: #db4938;
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 20px;
}

We'll have several cards, so, for the container element it will be displayed as a grid. And, with grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)), we can now make our cards responsive and let them use at least 15rem as width if there is enough space and 1fr if not.

And to make them look nice we double the shadow effect on .card class and use object-fit: cover on .card--avatar to prevent the image stretching.

So, now it looks much better but we still not have data to show.

Let's fix it in the next section

Show data with JavaScript

Notice that I used large images that take some time to load. To just show you in the best way the power of service worker.

As I said earlier, the .container class will hold our cards. Therefore, we need to select it.

In js/app.js

const container = document.querySelector(".container")
const coffees = [
  { name: "Perspiciatis", image: "images/coffee1.jpg" },
  { name: "Voluptatem", image: "images/coffee2.jpg" },
  { name: "Explicabo", image: "images/coffee3.jpg" },
  { name: "Rchitecto", image: "images/coffee4.jpg" },
  { name: " Beatae", image: "images/coffee5.jpg" },
  { name: " Vitae", image: "images/coffee6.jpg" },
  { name: "Inventore", image: "images/coffee7.jpg" },
  { name: "Veritatis", image: "images/coffee8.jpg" },
  { name: "Accusantium", image: "images/coffee9.jpg" },
]

Then, we create an array of cards with names and images.

In js/app.js

const showCoffees = () => {
  let output = ""
  coffees.forEach(
    ({ name, image }) =>
      (output += `
              <div class="card">
                <img class="card--avatar" src=${image} />
                <h1 class="card--title">${name}</h1>
                <a class="card--link" href="#">Taste</a>
              </div>
              `)
  )
  container.innerHTML = output
}

document.addEventListener("DOMContentLoaded", showCoffees)

With this code above, we can now loop through the array and show them on the HTML file. And to make everything work, we wait until the DOM (Document Object Model) content finished load to run the showCoffees method.

We've done a lot, but for now, we just have a traditional web app. So, let's change that in the next section by introducing the PWA features.

Web App Manifest

The web app manifest is a simple JSON file that informs the browser about your web app and how it should behave when installed on the user's mobile device or desktop. And to show the Add to Home Screen prompt, the web app manifest is required.

Now we know, what a web manifest is, let's create a new file named manifest.json (you've to name it like that) in the root directory, and add this code block below.

In manifest.json

{
  "name": "Dev'Coffee",
  "short_name": "DevCoffee",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fdfdfd",
  "theme_color": "#db4938",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "type": "image/png", "sizes": "72x72"
    },
    {
      "src": "/images/icons/icon-96x96.png",
      "type": "image/png", "sizes": "96x96"
    },
    {
      "src": "/images/icons/icon-128x128.png",
      "type": "image/png","sizes": "128x128"
    },
    {
      "src": "/images/icons/icon-144x144.png",
      "type": "image/png", "sizes": "144x144"
    },
    {
      "src": "/images/icons/icon-152x152.png",
      "type": "image/png", "sizes": "152x152"
    },
    {
      "src": "/images/icons/icon-192x192.png",
      "type": "image/png", "sizes": "192x192"
    },
    {
      "src": "/images/icons/icon-384x384.png",
      "type": "image/png", "sizes": "384x384"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "type": "image/png", "sizes": "512x512"
    }
  ]
}

In the end, it's just a JSON file with some mandatory and optional properties.

name: When the browser launches the splash screen, it will be the name displayed on the screen.
short_name: It will be the name displayed underneath your app shortcut on the home screen.
start_url: It will be the page shown to the user when your app is open.
display: It tells the browser how to display the app. They are several modes like minimal-ui, fullscreen, browser etc. Here, we use the standalone mode to hide everything related to the browser.
background_color: When the browser launches the splash screen, it will be the background of the screen.
theme_color: It will be the background color of the status bar when we open the app.
orientation: It tells the browser the orientation to have when displaying the app.
icons: When the browser launches the splash screen, it will be the icon displayed on the screen. Here, I used all sizes to fit any device's preferred icon. But you can just use one or two. It's up to you.

Now, we have a web app manifest, let's add it to the HTML file.

In index.html (head tag)

<link rel="manifest" href="manifest.json" />
<!-- ios support -->
<link rel="apple-touch-icon" href="images/icons/icon-72x72.png" />
<link rel="apple-touch-icon" href="images/icons/icon-96x96.png" />
<link rel="apple-touch-icon" href="images/icons/icon-128x128.png" />
<link rel="apple-touch-icon" href="images/icons/icon-144x144.png" />
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png" />
<link rel="apple-touch-icon" href="images/icons/icon-192x192.png" />
<link rel="apple-touch-icon" href="images/icons/icon-384x384.png" />
<link rel="apple-touch-icon" href="images/icons/icon-512x512.png" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
<meta name="theme-color" content="#db4938" />

As you can see, we linked our manifest.json file to the head tag. And add some other links which handle the IOS support to show the icons and colorize the status bar with our theme color.

With that, we can now dive into the final part and introduce the service worker.

What is Service Worker?

Notice that PWAs run only on https because the service worker can access to the request and handle it. Therefore the security is required.

A service worker is a script that your browser runs in the background in a separate thread. That means it runs in a different place, it's completely separate from your web page. That's the reason why it can't manipulate your DOM element.

However, it's super powerful. The service worker can intercept and handle network requests, manage the cache to enable offline support or send push notifications to your users.

That being said, let's create our very first service worker in the root folder and named it serviceWorker.js (the name is up to you). But you have to put it in the root to not limit its scope to one folder.

Cache the assets

In serviceWorker.js

const staticDevCoffee = "dev-coffee-site-v1"
const assets = [
  "/",
  "/index.html",
  "/css/style.css",
  "/js/app.js",
  "/images/coffee1.jpg",
  "/images/coffee2.jpg",
  "/images/coffee3.jpg",
  "/images/coffee4.jpg",
  "/images/coffee5.jpg",
  "/images/coffee6.jpg",
  "/images/coffee7.jpg",
  "/images/coffee8.jpg",
  "/images/coffee9.jpg",
]

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(staticDevCoffee).then(cache => {
      cache.addAll(assets)
    })
  )
})

Here, it looks intimidating first but it just JavaScript (don't worry).

We declare the name of our cache staticDevCoffee and the assets to store in the cache. And to perform that action, we need to attach a listener to self.

self is the service worker itself. It enables us to listen to life cycle events and do something in return.

The service worker has several life cycles, and one of them is the install event. It runs when a service worker is installed. It's triggered as soon as the worker executes, and it's only called once per service worker.

When the install event is fired, we run the callback which gives us access to the event object.

Caching something on the browser can take some time to finish because it's asynchronous.

So to handle it, we need to use waitUntil() to as you might guess, waiting for the action to finish.

Once the cache API ready, we can now run the open() method and create our cache by passing its name as an argument to caches.open(staticDevCoffee).

Then, it returns a promise, which helps us store our assets in the cache with cache.addAll(assets).

Hopefully, you're still with me.

Now, we successfully cached our assets on the browser. And the next time we load the page, the service worker will handle the request and fetch the cache if we are offline.

So, let's fetch our cache.

Fetch the assets

In serviceWorker.js

self.addEventListener("fetch", fetchEvent => {
  fetchEvent.respondWith(
    caches.match(fetchEvent.request).then(res => {
      return res || fetch(fetchEvent.request)
    })
  )
})

Here, we use the fetch event to, well, get back our data. The callback gives us access to fetchEvent, then we attach respondWith() to prevent the browser's default response and instead it returns a promise. Because the fetch action can take time to finish.

And once the cache ready, we apply the caches.match(fetchEvent.request). It will check if something in the cache matches fetchEvent.request. By the way, fetchEvent.request is just our array of assets.

Then, it returns a promise, and finally, we can return the result if it exists or the initial fetch if not.

Now, our assets can be cached and fetched by the service worker which increases a lot the load time of our images.

And most important, it makes our app available on offline mode.

But a service worker only can't do the job, we need to register it in our project.

Register the Service Worker

In js/app.js

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker
      .register("/serviceWorker.js")
      .then(res => console.log("service worker registered"))
      .catch(err => console.log("service worker not registered", err))
  })
}

Here, we start by checking if the serviceWorker is supported by the current browser. Because it's still not supported by all browsers.

Then, we listen to the page load event to register our service worker by passing the name of our file serviceWorker.js to navigator.serviceWorker.register() as a parameter to register our worker.

With this update, we have now transformed our regular web app to a PWA.

Final thoughts

Throughout this article, we have seen how amazing PWA can be. By adding a web app manifest file and a service worker, it increases a lot the user experience of our traditional web app. Because PWAs are fast, secure, reliable and the most important, they support offline mode.

Many frameworks out there comes now with a service worker file already set-up for us, however, knowing how to implement it with Vanilla JavaScript can help you understand PWAs. And you can go even further with service workers by caching assets dynamically or limit the size of your cache etc.. That being said, Thanks for reading this article.

You can check it live here

Source code here

Next steps

Web Manifest Documentation

Service Worker Documentation

Web Manifest Generator

Browser Support

How to copy text to the clipboard with JavaScript ?

Mon, 27 Jan 2020 15:45:00 GMT

As a developer, we know how useful and good it is to have a "copy" button sitting next to a code block. In some cases, it helps a lot in increasing the usability of our website.

In this post, we are going to make the text copiable to the clipboard with just a few lines of JavaScript.

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

The markup

To make this post quick and easy to digest, I will use Tailwind CSS to style the app and make everything look nice.

So, for the HTML part, it will be very simple (except the bunch of classes added by Tailwind CSS).

<main class="flex flex-col h-screen justify-center items-center bg-gray-100">
  <div class="bg-white max-w-sm p-5 rounded shadow-md mb-3">
    <input
      class="border-blue-500 border-solid border rounded py-2 px-4"
      type="text"
      placeholder="Enter some text"
      id="copyMe"
    />
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"
      onclick="copyMeOnClipboard()"
    >
      Copy
    </button>
  </div>
  <p class="text-green-700"></p>
</main>

Here, there are 3 important things to retain:

The id of the input tag copyMe
The function copyMeOnClipboard() of the button tag
The p tag

The id copyMe will help us to access to the value entered by the user. And when he clicks on the Copy button, it will trigger the copyMeOnClipboard() method which will handle the copy and show a success message dynamically with JavaScript.

With that being said, we can now move on to the JS file and do the final touch.

JavaScript is awesome

JavaScript

Of course, JavaScript is cool. And its document object has some very handy methods.

const copyText = document.querySelector("#copyMe")
const showText = document.querySelector("p")

const copyMeOnClipboard = () => {
  copyText.select()
  copyText.setSelectionRange(0, 99999) // used for mobile phone
  document.execCommand("copy")
  showText.innerHTML = `${copyText.value} is copied`
  setTimeout(() => {
    showText.innerHTML = ""
  }, 1000)
}

As you can see here, we start by selecting our needed elements copyText and showText. It's respectively the input and the paragraph tags. Then, we use the copyMeOnClipboard() function to handle the logic.

The copyText element (remember it's the input tag) gives us access to the select() method and as you might guess it selects the content of the input text field.

And finally, we execute the copy command with document.execCommand("copy") and get the text on the clipboard.

It's too easy

We've now done, but we can still improve it a little bit by showing to the user a success message. It's quite easy because we already have the showText element. The only thing we have to do is append the success message with innerHTML and remove it after 1 second with setTimeout().

And That's all folks!

Thanks for reading it.

You can check it live on here

Build a sticky navigation bar with React

Thu, 23 Jan 2020 17:10:00 GMT

In this tutorial, we are going to build a sticky navigation bar using React hooks.

You can preview the finished project in this CodeSandbox.

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Setting up the project

To be able to follow along, you need to create a new React app, so run the following command in your command-line interface (CLI):

npx create-react-app react-sticky-navbar

Next, structure the project as follows.

src
├── App.js
├── assets
|  └── images
|     └── logo.svg
├── components
|  └── Header
|     ├── About.js
|     ├── Navbar.css
|     ├── Navbar.js
|     ├── Welcome.css
|     └── Welcome.js
├── hooks
|  └── useSticky.js
├── index.css
├── index.js
├── serviceWorker.js
└── setupTests.js

I will mostly focus on the navbar files to make this article short and useful. You can still check the source code for a better understanding. So, let's get hands dirty by writing some meaningful code.

Header/Welcome.js

import React from "react"

import "./Welcome.css"
import Logo from "../../assets/images/logo.svg"
import About from "./About"

const Welcome = ({ element }) => {
  return (
    <main>
      <section className="welcome">
        <div ref={element}>
          <img src={Logo} alt="logo" className="welcome--logo" />
          <p>Even if you scroll, I will stick with you</p>
          <button className="welcome__cta-primary">Contact us</button>
        </div>
      </section>
      <About />
    </main>
  )
}

export default Welcome

As you can see, here, we have a simple component that receives the props element as a parameter. It is a reference to the element that will fire the sticky effect when scrolling.

By the way, I used destructuring to pull out the element from the props object. You can alternatively use props.element.

Now, let's move to the next file and create the navigation bar skeleton.

Header/Navbar.js

import React from "react"
import "./Navbar.css"
import Logo from "../../assets/images/logo.svg"

const Navbar = () => (
  <nav className="navbar">
    <div className="navbar--logo-holder">
      <img src={Logo} alt="logo" className="navbar--logo" />
      <h1> Stick'Me</h1>
    </div>
    <ul className="navbar--link">
      <li className="navbar--link-item">Home</li>
      <li className="navbar--link-item">About</li>
      <li className="navbar--link-item">Blog</li>
    </ul>
  </nav>
)
export default Navbar

For now, we have a simple component. We will update it later to display the elements conditionally and make the navigation bar sticky.

The sticky effect

For the sticky effect, we will create a custom hook to handle it and then use it in our components.

hooks/useSticky.js

import { useEffect, useState, useRef } from "react"

function useSticky() {
  const [isSticky, setSticky] = useState(false)
  const element = useRef(null)

  const handleScroll = () => {
    window.scrollY > element.current.getBoundingClientRect().bottom
      ? setSticky(true)
      : setSticky(false)
  }

  // This function handles the scroll performance issue
  const debounce = (func, wait = 20, immediate = true) => {
    let timeOut
    return () => {
      let context = this,
        args = arguments
      const later = () => {
        timeOut = null
        if (!immediate) func.apply(context, args)
      }
      const callNow = immediate && !timeOut
      clearTimeout(timeOut)
      timeOut = setTimeout(later, wait)
      if (callNow) func.apply(context, args)
    }
  }

  useEffect(() => {
    window.addEventListener("scroll", debounce(handleScroll))
    return () => {
      window.removeEventListener("scroll", () => handleScroll)
    }
  }, [debounce, handleScroll])

  return { isSticky, element }
}

export default useSticky

All the magic will happen here! I promise.

We first need to import some hooks from React and then define our state with the useState() hook. That means, now, we'll be able to switch between true and false depending on the scroll.

When the user scrolls, the function handleScroll() will be called. It checks whether window.scrollY is superior or not to stickyRef.current.getBoundingClientRect().bottom and then handles the isSticky state consequently.

This function will check if the number of pixels the page has currently scrolled along the vertical axis is superior or not to the position of the current element relative to its bottom.

Next, we use a debounce function to throttle the scrolling event to avoid performance issues. Instead of running handleScroll all the time, it will run every 20 milliseconds to give you more control.

With this in place, we can now listen to the scroll event when the component is mounted and remove listeners when unmounted.

Great! Now, to make the custom hook usable in other files, we have to return something from it. So, we need to return the isSticky state and the element reference as values.

Header/Navbar.js

import React from "react"
import "./Navbar.css"
import Logo from "../../assets/images/logo.svg"

const Navbar = ({ sticky }) => (
  <nav className={sticky ? "navbar navbar-sticky" : "navbar"}>
    <div className="navbar--logo-holder">
      {sticky ? <img src={Logo} alt="logo" className="navbar--logo" /> : null}
      <h1> Stick'Me</h1>
    </div>
    <ul className="navbar--link">
      <li className="navbar--link-item">Home</li>
      <li className="navbar--link-item">About</li>
      <li className="navbar--link-item">Blog</li>
    </ul>
  </nav>
)
export default Navbar

This component receives the sticky state as props. Next, we check if it's true or false and show classes or elements conditionally with the help of the ternary operator.

So far, we have covered a lot. However, we miss an important part: styling and animations. Let's do that in the next section.

In Navbar.css

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 2.5rem;
  position: absolute;
  z-index: 1;
  width: 100%;
}

.navbar-sticky {
  background: #333;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 1px 1px 1px #222;
  animation: moveDown 0.5s ease-in-out;
}

.navbar--logo {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  animation: rotate 0.7s ease-in-out 0.5s;
}

@keyframes moveDown {
  from {
    transform: translateY(-5rem);
  }
  to {
    transform: translateY(0rem);
  }
}

@keyframes rotate {
  0% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(0rem);
  }
}

Here, we fix the navigation bar on scroll using the .navbar-sticky class. Next, we use moveDown to make the animation effect that rotates the logo a bit to make it smooth on the scrolling.

With this step forward, we can now use the App.js file to display our components when the page loads.

App.js

import React from "react"
import useSticky from "./hooks/useSticky.js"
import Welcome from "./components/Header/Welcome"
import Navbar from "./components/Header/Navbar"

function App() {
  const { isSticky, element } = useSticky()
  return (
    <>
      <Navbar sticky={isSticky} />
      <Welcome element={element} />
    </>
  )
}

export default App

As you can see, here, we import the components and the custom hook. With this, we can now pass down the props and handle the sticky effect appropriately.

That's it! We are now done building a sticky navbar using React hooks.

Thanks for reading it.

You can find the Source code here

Differences between forEach and map that you should know

Mon, 20 Jan 2020 11:09:00 GMT

JavaScript has handy methods which help us iterate our arrays. The two most used for iteration is Array.prototype.map() and Array.prototype.forEach(), however, they remain a little bit unclear, especially for a beginner. Because they both do an iteration and output something. So, what is the difference?

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Definition
1. The returning value
2. Ability to chain other methods
3. Mutability
4. Performance Speed
Final Thoughts

Definition

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

The forEach() method executes a provided function once for each array element.

1. The returning value

The first difference between map() and forEach() is the returning value. The forEach() method returns undefined and map() returns a new array with the transformed elements even if they do the same job, the returning value remains different.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x)
//>>>>>>>>>>>>>return value: undefined

myAwesomeArray.map(x => x * x)
//>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25]

2. Ability to chain other methods

The second difference between these array methods is the fact that map() is chainable, that's mean, you can attach reduce(), sort(), filter() etc. after performing a map() method to an array. That's something you can't do with forEach() because as you might guess it returns undefined.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined
myAwesomeArray.map(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>>return value: 55

3. Mutability

According to MDN documentation:

forEach() does not mutate the array on which it is called. (However, callback may do so).

map() does not mutate the array on which it is called (although callback, if invoked, may do so).

JavaScript is weird.

Here, we see a very similar definition, and, we all know that they both receive a callback as an argument, so, which one relies on immutability?

Well, in my opinion, this definition is not clear though. And to know which does not mutate the original array, we first have to check how these two methods work.

The map() method returns an entirely new array with transformed elements and the same amount of data. In the case of forEach(), even if it returns undefined, it will mutate the original array with the callback.

Therefore, we see clearly that map() relies on immutability and forEach() is a mutator method.

4. Performance Speed

Regarding performance speed, they are a little bit different. But, does it matter? Well, it depends on various things like the computer, the amount of data, etc. You can check it on your own with this example below or with jsPerf to see which is faster.

const myAwesomeArray = [1, 2, 3, 4, 5]

const startForEach = performance.now()
myAwesomeArray.forEach(x => (x + x) * 10000000000)
const endForEach = performance.now()
console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`)

const startMap = performance.now()
myAwesomeArray.map(x => (x + x) * 10000000000)
const endMap = performance.now()
console.log(`Speed [map]: ${endMap - startMap} miliseconds`)

Final Thoughts

As always, the choice between map() and forEach() will depend on the use case. If you plan to change, alternate or use the data, it's preferable to pick map(), because it returns a new array with the transformed data. But, if you won't need the returned array, don't use map(), instead use forEach() or even a for loop.

Hopefully, this post makes clear the differences between these two methods. If there are more differences, please share them in the comment section, otherwise thanks for reading it.

Photo by Franck V. on Unsplash

JavaScript array methods: Mutator VS Non-mutator

Thu, 16 Jan 2020 15:30:00 GMT

JavaScript array methods enable us to manipulate our data. However, we've to use them with care depending on how they manipulate our arrays. Some of them rely on immutability and some others use the mutable way. And knowing how they manipulate our data can help us to build predictable apps.

In this post, I will lead you through mutator and non-mutator array methods and their returning value.

Notice this article is not an introduction to array methods. I will focus on mutability and immutability. So, If you're new to array methods, this post might help you.

Otherwise, let's get started.

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Mutator array methods
- sort()
- unshift()
- shift()
- splice()
- push()
- reverse()
- pop()
- fill()
- forEach()
Non-mutator array methods
- slice()
- join()
- includes()
- filter()
- concat()
- every()
- find()
- findIndex()
- map()
- reduce()
- some()
- flat()
- flatMap()

Mutator array methods

These following methods will modify the array.

sort()

It sorts the elements of an array.

return value: the sorted array.

const myAwesomeArray = [5, 4, 3, 2, 1]

// Sort from smallest to largest
myAwesomeArray.sort((a, b) => a - b)
//------->return value: [1, 2, 3, 4, 5]

unshift()

It adds one or more elements to the beginning of an array.

return value: the new length of the array.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.unshift(6)
//------->return value: (6)

shift()

It removes the first element from an array.

return value: the removed element or undefined if the array is empty.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.shift()
//------->return value: (5)

splice()

It removes or replaces existing elements and/or adds new elements.

return value: The array which contain the deleted elements/element. If no element is removed, it returns an empty array.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.splice(0, 1, 8)
//------->return value: [5]

push()

It adds one or more elements to the end of an array.

return value: the new length of the array.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.push(7)
//------->return value: (6)

reverse()

It reverses an array.

return value: the reversed array.

const myAwesomeArray = ["e", "d", "c", "b", "a"]

myAwesomeArray.reverse()
//------->return value: ['a', 'b', 'c', 'd', 'e']

pop()

It removes the last element from an array.

return value: the removed element from the array or undefined if the array is empty.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.pop()
//------->return value: 1

fill()

It fills all the elements of an array with the same value.

return value: the modified array.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.fill(0, 1, 3)
//------->return value: [1, 0, 0, 4, 5]

forEach()

It applies a function to each element of the array.

return value: it returns undefined.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.forEach(element => console.log(element.name))
//------->return value: undefined

Non-mutator array methods

These following methods do not modify the array and return some representation of the array.

slice()

It extracts a section of a given array.

return value: the new array with the extracted elements.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.slice(0, 3)
//------->return value: [1, 2, 3]

join()

It joins all elements of an array into a string.

return value: a string with all array elements concatenated or the empty string if the array is empty.

const myAwesomeArray = ["JavaScript", "is", "awesome"]

myAwesomeArray.join(" ")
//------->return value: "JavaScript is awesome"

includes()

It determines whether the array contains a given value or not.

return value: it returns a boolean true or false.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.includes(3)
//------->return value: true

filter()

It filters an array with a function to check which element passes the test.

return value: the new array with elements that pass the test otherwise an empty array.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
  { id: 4, name: "Mass" },
]

myAwesomeArray.filter(element => element.name === "Mass")
//-------> return value : [{id: 3, name: "Mass"},
//                  {id: 4, name: "Mass"}]

concat()

It will merge two or more arrays/values by concatenating it.

return value: the new array with arrays/values concatenated.

const myAwesomeArray = [1, 2, 3, 4, 5]
const myAwesomeArray2 = [10, 20, 30, 40, 50]
myAwesomeArray.concat(myAwesomeArray2)
//-------> return value : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

every()

It checks whether all elements in the array pass the test function or not.

return value: it returns a boolean true or false.

const myAwesomeArray = ["a", "a", "a", "a", "a"]

myAwesomeArray.every(test => test === "a")
//-------> return value : true

find()

It finds the element that satisfies the provided testing function.

return value: the first element that satisfies the testing function otherwise it returns undefined.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.find(element => element.id === 3)
//-------> return value : {id: 3, name: "Mass"}

findIndex()

It returns the index of an element found and which satisfies the test function.

return value: the index of the first element that satisfies the testing function otherwise it returns -1.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.findIndex(element => element.id === 3)
//-------> return value : 2

map()

It takes a function as an argument that will run on all elements on the array.

return value: a new array that contains each element being the result of the callback function.

const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)

//-------> return value : [25, 16, 9, 4, 1]

reduce()

It executes a reducer function on each element of the array.

return value: a single value which results from the reduction of the array.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.reduce((total, value) => total * value)
//-------> return value = 120

some()

It determines whether at least one element in the array matches the test function or not.

return value: it returns a boolean true or false.

const myAwesomeArray = ["a", "b", "c", "d", "e"]

myAwesomeArray.some(test => test === "d")
//-------> return value : true

flat()

It flats all sub-array elements into a new array.

return value: a new array with the sub-array elements concatenated into it.

const myAwesomeArray = [[1, 2], [3, 4], 5]

myAwesomeArray.flat()
//-------> return value : [1, 2, 3, 4, 5]

flatMap()

It applies a function to each element of the array and then flattens the result into an array.

return value: a new array with each element being the result of the callback function and flattened.

const myAwesomeArray = [[1], [2], [3], [4], [5]]

myAwesomeArray.flatMap(arr => arr * 10)
//-------> return value : [10, 20, 30, 40, 50]

15 must-know JavaScript array methods in 2020

Thu, 09 Jan 2020 11:25:44 GMT

In JavaScript, an array is a special variable that is used to store different elements. It has some built-in properties and methods we can use to add, remove, iterate, or manipulate data following our needs. And knowing JavaScript array methods can lift your skills as a developer.

In this post, we're going to see 15 array methods that can help you manipulate your data properly.

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

1. some()
2. reduce()
3. every()
4. map()
5. flat()
6. filter()
7. forEach()
8. findIndex()
9. find()
10. sort()
11. concat()
12. fill()
13. includes()
14. reverse()
15. flatMap()

Notice that mostly in this post, we'll simplify the function passed as parameter.

// Instead of using this way
myAwesomeArray.some(test => {
  if (test === "d") {
    return test
  }
})
// We'll use the shorter one
myAwesomeArray.some(test => test === "d")

1. some()

This method tests the array with a function passed as a parameter. It will return true if at least one element matches the test and false for the opposite.

const myAwesomeArray = ["a", "b", "c", "d", "e"]

myAwesomeArray.some(test => test === "d")
//-------> Output : true

2. reduce()

This method receives a function which has an accumulator and a value as an argument. It applies the function to the accumulator and each value in the array to return at the end just a single value.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.reduce((total, value) => total * value)
// 1 * 2 * 3 * 4 * 5
//-------> Output = 120

3. every()

This method tests the array with a function passed as a parameter. It will return true if each element of the array match the test and false for the opposite.

const myAwesomeArray = ["a", "b", "c", "d", "e"]

myAwesomeArray.every(test => test === "d")
//-------> Output : false

const myAwesomeArray2 = ["a", "a", "a", "a", "a"]

myAwesomeArray2.every(test => test === "a")
//-------> Output : true

4. map()

This method receives a function as a parameter. And return a new array that contains an image of each element of the array. It will always return the same amount of items.

const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)

//-------> Output : 25
//                  16
//                  9
//                  4
//                  1

5. flat()

This method creates a new array that contains the elements holden on the sub-array and flat it into the new array. Notice that, this method will go only one level depth.

const myAwesomeArray = [[1, 2], [3, 4], 5]

myAwesomeArray.flat()
//-------> Output : [1, 2, 3, 4, 5]

6. filter()

This method receives a function as a parameter. And return a new array that contains all the elements of the array for which the filtering function passed as argument returns true.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
  { id: 4, name: "Mass" },
]

myAwesomeArray.filter(element => element.name === "Mass")
//-------> Output : 0:{id: 3, name: "Mass"},
//                  1:{id: 4, name: "Mass"}

7. forEach()

This method applies a function to each element of the array.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.forEach(element => console.log(element.name))
//-------> Output : john
//                  Ali
//                  Mass

8. findIndex()

This method receives a function as a parameter and will apply it to the array. It returns the index of an element found and which satisfies the test function passed as an argument or -1 if none satisfies it.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.findIndex(element => element.id === 3)
//-------> Output : 2

myAwesomeArray.findIndex(element => element.id === 7)
//-------> Output : -1

9. find()

This method receives a function as an argument and will apply it to the array. It returns the value of an element found in the array and which satisfies the test function. Otherwise, it returns undefined.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.find(element => element.id === 3)
//-------> Output : {id: 3, name: "Mass"}

myAwesomeArray.find(element => element.id === 7)
//-------> Output : undefined

10. sort()

This method receives a function as a parameter. It sorts the elements of an array and returns it.

const myAwesomeArray = [5, 4, 3, 2, 1]

// Sort from smallest to largest
myAwesomeArray.sort((a, b) => a - b)
//-------> Output : [1, 2, 3, 4, 5]

// Sort from largest to smallest
myAwesomeArray.sort((a, b) => b - a)
//-------> Output : [5, 4, 3, 2, 1]

11. concat()

This method will merge two or more arrays/values by concatenating it. It returns a new array with the elements.

const myAwesomeArray = [1, 2, 3, 4, 5]
const myAwesomeArray2 = [10, 20, 30, 40, 50]
myAwesomeArray.concat(myAwesomeArray2)
//-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

12. fill()

This method fills all the elements of a given array with the same value, from a start index (default 0) to an end index (default array.length).

const myAwesomeArray = [1, 2, 3, 4, 5]

// The first argument (0) is the value
// The second argument (1) is the starting index
// The third argument (3) is the ending index
myAwesomeArray.fill(0, 1, 3)
//-------> Output : [1, 0, 0, 4, 5]

13. includes()

This method will return true if the array contains a certain element, and false if not.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.includes(3)
//-------> Output : true

myAwesomeArray.includes(8)
//-------> Output : false

14. reverse()

This method reverses an array. The first element becomes the last, and the last element will be the first.

const myAwesomeArray = ["e", "d", "c", "b", "a"]

myAwesomeArray.reverse()
//-------> Output : ['a', 'b', 'c', 'd', 'e']

15. flatMap()

The method applies a function to each element of the array and then flatten the result into an array. It combines flat() and map() in one function.

const myAwesomeArray = [[1], [2], [3], [4], [5]]

myAwesomeArray.flatMap(arr => arr * 10)
//-------> Output : [10, 20, 30, 40, 50]

// With .flat() and .map()
myAwesomeArray.flat().map(arr => arr * 10)
//-------> Output : [10, 20, 30, 40, 50]

Redux VS React Context: Which one should you choose?

Thu, 02 Jan 2020 08:00:00 GMT

React context has been there for a while. With the coming of React hooks, it's now much better. It has so many advantages, including the fact that the context API doesn't require any third-party libraries. We can use it in React apps to manage our state like redux.

In this article, we're going to manage our state with React context, to see by ourselves if it's better than redux regarding state's management. By the way, this post is the follow-up of my previous one 7 steps to understand React Redux.

Note: This article covers only the context API. We're going to build the same project with React context. If you're interested in how to manage state with redux, my previous post might help you here.

Otherwise let's get started.

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Prerequisites
Setting Up the Project
Create a context
Provide the context
Consume the context
Enhance the context with useReducer
Redux VS the React Context: Who wins?

Prerequisites

To be able to follow along, you have to know at least the basics to advance features of React and particularly React hooks. A good grasp of redux can also help.

Setting Up the Project

If you're good to go, we can now create a new React app by running:

npx create-react-app react-context-hooks-example

Then, we have to create some files.

Add a containers folder in the src, then create Articles.js file.

import React, { useState } from "react"
import Article from "../components/Article/Article"

const Articles = () => {
  const [articles, setArticles] = useState([
    { id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra" },
    { id: 2, title: "post 2", body: "Quisque cursus, metus vitae pharetra" },
  ])

  return (
    <div>
      {articles.map(article => (
        <Article key={article.id} article={article} />
      ))}
    </div>
  )
}

export default Articles

Add a components folder in the src, then create AddArticle/AddArticle.js and Article/Article.js.
In the Article.js

import React from "react"
import "./Article.css"

const article = ({ article }) => (
  <div className="article">
    <h1>{article.title}</h1>
    <p>{article.body}</p>
  </div>
)

export default article

In the AddArticle.js

import React, { useState } from "react"
import "./AddArticle.css"

const AddArticle = () => {
  const [article, setArticle] = useState()

  const handleArticleData = e => {
    setArticle({
      ...article,
      [e.target.id]: e.target.value,
    })
  }
  const addNewArticle = e => {
    e.preventDefault()
    // The logic will come later
  }

  return (
    <form onSubmit={addNewArticle} className="add-article">
      <input
        type="text"
        id="title"
        placeholder="Title"
        onChange={handleArticleData}
      />
      <input
        type="text"
        id="body"
        placeholder="Body"
        onChange={handleArticleData}
      />
      <button>Add article</button>
    </form>
  )
}
export default AddArticle

In the App.js

import React, { Fragment } from "react"
import Articles from "./containers/Articles"
import AddArticle from "./components/AddArticle/AddArticle"

function App() {
  return (
    <Fragment>
      <AddArticle />
      <Articles />
    </Fragment>
  )
}
export default App

So, if you've done with all the instructions above, we can move on and start implementing the context API.

Create a context

A context helps us to handle state without passing down props on every component. Only the needed component will consume the context. To implement it, we need to create (it's optional) a new folder named context in our project, and add this code below to aricleContext.js.

In context/aricleContext.js

import React, { createContext, useState } from "react"

export const ArticleContext = createContext()
const ArticleProvider = ({ children }) => {
  const [articles, setArticles] = useState([
    { id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra" },
    { id: 2, title: "post 2", body: "Quisque cursus, metus vitae pharetra" },
  ])
  const saveArticle = article => {
    const newArticle = {
      id: Math.random(), // not really unique but it's just an example
      title: article.title,
      body: article.body,
    }
    setArticles([...articles, newArticle])
  }
  return (
    <ArticleContext.Provider value={{ articles, saveArticle }}>      {children}    </ArticleContext.Provider>  )
}

export default ArticleProvider

The React library gives us access to a method called createContext. We can use it to as you might guess create a context. Here, we pass nothing to our context ArticleContext, but you can pass as argument object, array, string, etc. Then we define a function which will help us distribute the data through the Provider. We give to our Provider two values: the list of articles and the method to add an article. By the way, articles:articles and saveArticle:saveArticle is the same as articles and saveArticle it's just a convenient syntax in case it confuses you.

Now we've a context, however, we need to provide the context in order to consume it. To do that, we need to wrap our higher component with ArticleProvider and App.js might be the perfect one. So, let's add it to App.js.

Provide the context

In App.js

import React from "react"

import ArticleProvider from "./context/articleContext"
import Articles from "./containers/Articles"
import AddArticle from "./components/AddArticle/AddArticle"

function App() {
  return (
    <ArticleProvider>      <AddArticle />      <Articles />    </ArticleProvider>  )
}
export default App

As you see here, we first import our context provider ArticleProvider and wrap components which need to consume the context. Now what about consuming the context? and how we can do that. You might be surprised how easy it is to consume the context with hooks. So, let's do that.

Consume the context

We're going to consume the context in two components: Articles.js and AddArticle.js.

In Articles.js

import React, { useContext } from "react"
import { ArticleContext } from "../context/articleContext"
import Article from "../components/Article/Article"

const Articles = () => {
  const { articles } = useContext(ArticleContext)  return (
    <div>
      {articles.map(article => (
        <Article key={article.id} article={article} />
      ))}
    </div>
  )
}

export default Articles

With React hooks, we've now access to the useContext hook. And as you might guess, it will help us consume the context. By passing our context ArticleContext as argument to useContext, it gives us access to our state holden in articleContext.js. Here, we just need articles. Therefore, we pull it out and map through our articles and show them. Now, let's move on to AddArticle.js.

In AddArticle.js

import React, { useState, useContext } from "react"import "./AddArticle.css"
import { ArticleContext } from "../../context/articleContext"

const AddArticle = () => {
  const { saveArticle } = useContext(ArticleContext)  const [article, setArticle] = useState()

  const handleArticleData = e => {
    setArticle({
      ...article,
      [e.target.id]: e.target.value,
    })
  }

  const addNewArticle = e => {
    e.preventDefault()
    saveArticle(article)
  }

  return (
    <form onSubmit={addNewArticle} className="add-article">
      <input
        type="text"
        id="title"
        placeholder="Title"
        onChange={handleArticleData}
      />
      <input
        type="text"
        id="body"
        placeholder="Body"
        onChange={handleArticleData}
      />
      <button>Add article</button>
    </form>
  )
}
export default AddArticle

As the previous case, here again we use useContext to pull out saveArticle from our context. With that, we can now safely add a new article through the React Context.

We now manage our whole application's state through the React Context. However, we can still improve it through another hook named useReducer.

Enhance the context with useReducer

The useReducer hook is an alternative to useState. It's mostly use for the more complex state. useReducer accepts a reducer function with the initial state of our React app, and returns the current state, then dispatches a function.

This will be much more clear, when we start implementing it. Now, we've to create a new file reducer.js in our context folder and add this code block below.

In reducer.js

export const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_ARTICLE":
      return [
        ...state,
        {
          id: Math.random(), // not really unique but it's just an example
          title: action.article.title,
          body: action.article.body,
        },
      ]
    default:
      return state
  }
}

As you can see, the function reducer receives two parameters: state and action. Then, we check if the type of action is equal to ADD_ARTICLE (you can create a constant or file to avoid mistyping), if it's the case add a new article to our state. This syntax might be familiar if you've used redux. Now, the logic to add a new article is handled by the reducer. We've not done yet, let's add it to our context file.

import React, { createContext, useReducer } from "react"import { reducer } from "./reducer"export const ArticleContext = createContext()

const ArticleProvider = ({ children }) => {
  const [articles, dispatch] = useReducer(reducer, [    { id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra" },    { id: 2, title: "post 2", body: "Quisque cursus, metus vitae pharetra" },  ])
  return (
    <ArticleContext.Provider value={{ articles, dispatch }}>
      {children}
    </ArticleContext.Provider>
  )
}

export default ArticleProvider

Here, we start by importing the useReducer hook and our function reducer. As i mention earlier, useReducer takes a function. Therefore, we've to pass our reducer function to it and as second argument the initial state of our application. Now useReducer gives us access to our articles and a dispatch function (you can name it whatever you like). And we can now, update our provider with these new values given by useReducer.

You can already see that our context file is now much cleaner. By renaming the function which add a new article to dispatch, we've now to update a little bit our AddArticle.js file.

In AddArticle.js

import React, { useState, useContext } from "react"
import "./AddArticle.css"
import { ArticleContext } from "../../context/articleContext"

const AddArticle = () => {
  const { dispatch } = useContext(ArticleContext)  const [article, setArticle] = useState()

  const handleArticleData = e => {
    setArticle({
      ...article,
      [e.target.id]: e.target.value,
    })
  }

  const addNewArticle = e => {
    e.preventDefault()
    dispatch({ type: "ADD_ARTICLE", article })
  }

  return (
    <form onSubmit={addNewArticle} className="add-article">
      <input
        type="text"
        id="title"
        placeholder="Title"
        onChange={handleArticleData}
      />
      <input
        type="text"
        id="body"
        placeholder="Body"
        onChange={handleArticleData}
      />
      <button>Add article</button>
    </form>
  )
}
export default AddArticle

Now, instead of pulling out saveArticle, now we get the dispatch function. It expects a type of action ADD_ARTICLE and a value article which will be the new article. With that, our project is now managed through the context API and React Hooks.

Redux VS the React Context: Who wins?

You can now clearly see the difference between Redux and React Context through their implementations on our project. However, Redux is far from dead or be killed by React Context. Redux is such boilerplate and require a bunch of libraries. But it remains a great solution towards props drilling.

The context Api with hooks is much more easier to implement and will not increase your bundle size.

However who wins? in my opinion, for a low-frequency updates like locale, theme changes, user authentication, etc. the React Context is perfectly fine. But with a more complex state which has a high-frequency updates, the React Context won't be a good solution. Because, the React Context will triggers a re-render on each update, and optimizing it manually can be really tough. And there, a solution like Redux is much easier to implement.

You can find the finished project here

7 steps to understand React Redux

Thu, 26 Dec 2019 08:00:00 GMT

React is awesome, we can't say it enough. But where it comes to the state management part, things become tricky. There is so much terminology to retain: state, store, actions, reducers, middleware, etc. With medium size or bigger react apps, managing our state can be really hard as our application grows. We need to manage it either by redux or alternatives like the context API, flux etc. In this article, we will focus on redux and how it works with react. Redux is a stand-alone library, it's framework agnostic, that's mean you can use it with other frameworks or just vanilla JavaScript.

In this post, i will lead you through 7 steps to understand react redux in the easiest way.

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Prerequisites
1. What is a state?
2. What is redux and why we need it?
3. What is a reducer?
4. What is a store?
5. How to connect our store to React?
6. What is an action?
7. How to handle asynchronous code with redux?
Conclusion
Resources

Prerequisites

This post assumes that you have at least a basic to mid-level understanding of React and ES6. Then, you'll need to create a fresh react app with this command:

npx create-react-app react-redux-example

And add to your react app the redux and react-redux packages by running in your shell

npm install redux react-redux

Then, we need to create some files.

Add a containers folder in the src, then create Articles.js file.

import React, { useState } from "react"
import Article from "../components/Article/Article"
import AddArticle from "../components/AddArticle/AddArticle"

const Articles = () => {
  const [articles, setArticles] = useState([
    { id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra" },
    { id: 2, title: "post 2", body: "Quisque cursus, metus vitae pharetra" },
  ])
  const saveArticle = e => {
    e.preventDefault()
    // the logic will be updated later
  }

  return (
    <div>
      <AddArticle saveArticle={saveArticle} />
      {articles.map(article => (
        <Article key={article.id} article={article} />
      ))}
    </div>
  )
}

export default Articles

Add a components folder in the src, then create AddArticle/AddArticle.js and Article/Article.js.
In the Article.js

import React from "react"
import "./Article.css"

const article = ({ article }) => (
  <div className="article">
    <h1>{article.title}</h1>
    <p>{article.body}</p>
  </div>
)

export default article

In the AddArticle.js

import React, { useState } from "react"
import "./AddArticle.css"

const AddArticle = ({ saveArticle }) => {
  const [article, setArticle] = useState()

  const handleArticleData = e => {
    setArticle({
      ...article,
      [e.target.id]: e.target.value,
    })
  }
  const addNewArticle = e => {
    e.preventDefault()
    saveArticle(article)
  }

  return (
    <form onSubmit={addNewArticle} className="add-article">
      <input
        type="text"
        id="title"
        placeholder="Title"
        onChange={handleArticleData}
      />
      <input
        type="text"
        id="body"
        placeholder="Body"
        onChange={handleArticleData}
      />
      <button>Add article</button>
    </form>
  )
}
export default AddArticle

In the App.js

import React from "react"
import Articles from "./containers/Articles"

function App() {
  return <Articles />
}
export default App

So, if you've done with the prerequisite, we can move on and demystify what is a state.

1. What is a state?

The heart of every react stateful component is its state. It determines how the component should render or behave. To really understand the state, we must apply it to real examples. Is user authenticated? is a state that controls if a user is authenticated or not, is modal open? is also a state which look if a given modal is open or not same as a list of articles or a counter ect.

// Class based component
state = {
  articles: [
    { id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra" },
    { id: 2, title: "post 2", body: "Quisque cursus, metus vitae pharetra" },
  ],
}
// React hooks
const [articles, setArticles] = useState([
  { id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra" },
  { id: 2, title: "post 2", body: "Quisque cursus, metus vitae pharetra" },
])

Now we know what is a state, it's time to introduce redux and dive deeper into it.

2. What is redux and why we need it?

Managing our state without redux or alternatives can be tough. Imagine we have to check on every component if the user is authenticated or not. To handle that use-case, we have to pass props through every component and following the application growth, it's just impossible to manage our state like that. And there is where redux really shines.

Redux is an independent library that helps us manage our state by giving access to our components the state it needs via a central store. Redux stores the whole state of our app in an immutable object tree.

Another broad term: store, to understand it well we first need to explain what is a reducer?

3. What is a reducer?

A reducer is a pure function that receives the old (previous) state and an action as arguments, then returns as output the updated state. The reducer handles only synchronous code, that's mean no side effect like HTTP request or anything like that. We can still handle asynchronous code with redux and we'll learn how to doing it later. By the way, if you get confused by the term action, no worries, it will be much clearer later. So, Let's create our very first reducer.

The structure of your files is totally up to you, however i'll follow the convention and create a store folder in the project to hold our reducers, actions etc. Then, create a reducer.js file.

In reducer.js

const initialState = {
  articles: [
    { id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra" },
    { id: 2, title: "post 2", body: "Quisque cursus, metus vitae pharetra" },
  ],
}

const reducer = (state = initialState, action) => {
  return state
}
export default reducer

As i say earlier, a reducer is just a function that receives the previous state and an action as parameters and return the updated state. Here, we have not a previous state, so it will be undefined, therefore we need to initialize it with initialState which hold our predefined articles.

Now we've set up our reducer, it's time to create our store

4. What is a store?

A store holds the whole state tree of our react app. It's where our application state live. You can see it as a big JavaScript object. To create a store we need a reducer to pass as an argument. We already have a reducer, let's connect it to our store.

In our index.js file.

import React from "react"
import ReactDOM from "react-dom"
import { createStore } from "redux"

import "./index.css"
import App from "./App"
import reducer from "./store/reducer"

const store = createStore(reducer)

ReactDOM.render(<App />, document.getElementById("root"))

To create a store, we first need to import createStore from the redux package, then import our reducer and finally pass it as an argument to the store createStore(reducer). With that, we successfully create our store, but we've not done yet, we have to connect it to our react app.

5. How to connect our store to React?

To connect the store to react, we need to import a helper function named Provider from the react-redux package. Then wrap our App component with Provider and pass as props the store which has as value our current store.

In our index.js file.

import React from "react"
import ReactDOM from "react-dom"
import { createStore } from "redux"
import { Provider } from "react-redux"

import "./index.css"
import App from "./App"
import reducer from "./store/reducer"

const store = createStore(reducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
)

Then, we need to connect our component to the redux store.

In Articles.js

import React from "react"
import { connect } from "react-redux"

import Article from "../components/Article/Article"
import AddArticle from "../components/AddArticle/AddArticle"

const Articles = ({ articles }) => {
  const saveArticle = e => {
    e.preventDefault()
    // the logic will be updated later
  }
  return (
    <div>
      <AddArticle saveArticle={saveArticle} />
      {articles.map(article => (
        <Article key={article.id} article={article} />
      ))}
    </div>
  )
}

const mapStateToProps = state => {
  return {
    articles: state.articles,
  }
}

export default connect(mapStateToProps)(Articles)

Here, we first import connect(), a function which returns a higher order function and receive as input a component. It helps us to connect our component to the store and give access to get the state.

Then, we declare a new function named mapStateToProps() (you can name it whatever you like). It's used to get our state from the redux store. The function receives as parameter the state stored in redux and returns a JavaScript object that will hold our articles.

And to reach the store, we need to pass mapStateToProps() to the connect function. It will take our component Articles and return a wrapper component with the props it injects. That's mean, we can now get our state from the store. The state is received by the component through props, we can still show the articles as before but now through redux.

We've successfully connect our store to react and get our state from it. Now, let's dive into actions

6. What is an action?

An action is a payload of information that contains a type like REMOVE_ARTICLE or ADD_ARTICLE etc. Actions are dispatched from your component. It sends data from your react component to your redux store. The action does not reach the store, it's just the messenger. The store is changed by reducer.

To create an action in our project, we need to create in our store folder a new file named actionTypes.js.

export const ADD_ARTICLE = "ADD_ARTICLE"

Then, we need to go to our Articles.js file and add this following code.

import React from "react"
import { connect } from "react-redux"

import Article from "../components/Article/Article"
import AddArticle from "../components/AddArticle/AddArticle"
import * as actionTypes from "../store/actionTypes"

const Articles = ({ articles, saveArticle }) => (
  <div>
    <AddArticle saveArticle={saveArticle} />
    {articles.map(article => (
      <Article key={article.id} article={article} />
    ))}
  </div>
)

const mapStateToProps = state => {
  return {
    articles: state.articles,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    saveArticle: article =>
      dispatch({ type: actionTypes.ADD_ARTICLE, articleData: { article } }),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Articles)

Then, we need to import everything from actionTypes.js. And create a new function mapDispatchToProps which receive a function dispatch as parameter. The mapDispatchToProps return an object which has a property saveArticle. It's a reference to a function that will dispatch an action in our store.

saveArticle holds an anonymous function that receives our article as argument and return the dispatch function. It receives the type and the data to update as parameters. And as you guess, it will dispatch the action in our store.

Finally, we need to pass mapDispatchToProps as second argument to the connect function. And to make it work, we need to update our reducer and add the action ADD_ARTICLE.

In store/reducer.js

import * as actionTypes from "./actionTypes"

const initialState = {
  articles: [
    { id: 1, title: "post 1", body: "Quisque cursus, metus vitae pharetra" },
    { id: 2, title: "post 2", body: "Quisque cursus, metus vitae pharetra" },
  ],
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.ADD_ARTICLE:
      const newArticle = {
        id: Math.random(), // not really unique but it's just an example
        title: action.article.title,
        body: action.article.body,
      }
      return {
        ...state,
        articles: state.articles.concat(newArticle),
      }
  }
  return state
}
export default reducer

As you can see, we import our actionTypes. Then, we check in our reducer function if the action's type is equal to ADD_ARTICLE. If it's the case, first create a new object which holds our article then append it to our articles array. Before we return the state, we copy the old state, then concat it with the new article. In that way, we keep our state safe and immutable.

7. How to handle asynchronous code with redux?

The reducer as i say earlier handles only synchronous code. To execute asynchronous code, we need to use an action creator. It's a function which returns a function or an action i should say. So, to use it in our project, we need to create a new file actionCreators.js.

In store/actionCreators.js

import * as actionTypes from "./actionTypes"

export const addArticle = article => {
  return {
    type: actionTypes.ADD_ARTICLE,
    article,
  }
}

Here, we declare a new action creator named addArticle. It's a function that receives the article as argument and returns the type of the action and the value. By the way, article is the same as article: article, it's just an ES6 convenient syntax. Now we can move on and change the function mapDispatchToProps in the Articles.js file.

In Articles.js

import React from "react"
import { connect } from "react-redux"

import Article from "../components/Article/Article"
import AddArticle from "../components/AddArticle/AddArticle"
import { addArticle } from "../store/actionCreators"

const Articles = ({ articles, saveArticle }) => (
  <div>
    <AddArticle saveArticle={saveArticle} />
    {articles.map(article => (
      <Article key={article.id} article={article} />
    ))}
  </div>
)

const mapStateToProps = state => {
  return {
    articles: state.articles,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    saveArticle: article => dispatch(addArticle(article)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Articles)

As you can see, we first import our action creator addArticle, then in the mapDispatchToProps function, we update the argument passed to dispatch. Now, it receives the action creator and its value article.

But we've not done yet, we need to add a new package redux-thunk to our project to be able to handle asynchronous code.

npm install react-redux

redux-thunk is a middleware that will help us handle asynchronous code. A middleware provides a way to interact with actions that have been dispatched to the store before they reach the reducer. Now let's implement it to our project.

In index.js

import React from "react"
import ReactDOM from "react-dom"
import { createStore, applyMiddleware } from "redux"
import { Provider } from "react-redux"
import thunk from "redux-thunk"

import "./index.css"
import App from "./App"
import reducer from "./store/reducer"

const store = createStore(reducer, applyMiddleware(thunk))

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
)

In this code block, we first import applyMiddleware from redux and thunk from redux-thunk. Then to make it work, we need to pass to createStore a second argument or enhancer which receives our middleware thunk. By doing this, we are now able to deal with asynchronous code. Let's now update our action creator.

In store/actionCreators.js

import * as actionTypes from "./actionTypes"

export const addArticle = article => {
  return {
    type: actionTypes.ADD_ARTICLE,
    article,
  }
}

export const simulateHttpRequest = article => {
  return dispatch => {
    setTimeout(() => {
      dispatch(addArticle(article))
    }, 3000)
  }
}

For this post, we will just simulate an HTTP request.

Here, we have a new action creator simulateHttpRequest which receive the article as input and return a function. Due to the thunk middleware, we can access to dispatch because our middleware runs between the dispatching of our action and the point of time the action reaches the reducer. Therefore, we can get dispatch as argument. Then, wait 3 seconds with setTimeout to just simulate an HTTP request before dispatching the action and add the article to our array of articles.

We've changed our action creators a little bit, to make it work again, we need to update Articles.js.

In Articles.js

import React from "react"
import { connect } from "react-redux"

import Article from "../components/Article/Article"
import AddArticle from "../components/AddArticle/AddArticle"
import { simulateHttpRequest } from "../store/actionCreators"

const Articles = ({ articles, saveArticle }) => (
  <div>
    <AddArticle saveArticle={saveArticle} />
    {articles.map(article => (
      <Article key={article.id} article={article} />
    ))}
  </div>
)

const mapStateToProps = state => {
  return {
    articles: state.articles,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    saveArticle: article => dispatch(simulateHttpRequest(article)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Articles)

Here, the only thing we have to do is change addArticle to simulateHttpRequest, in that way, everything should work again, and now we're able to handle asynchronous code through redux.

You can find the finished project here

Conclusion

When it comes to dealing with medium size to bigger react apps, managing our state can be really hard. And a package like redux can make it very easy. There are also some alternatives like the context API (+hooks) which is very helpful and does not require a third party library, but dive into redux is still relevant.

However, redux is overkill for simple react app like our project, we don't need redux to manage our state, but it's easier to understand how redux works with a very simple app.

Resources

React Redux official documentation
Redux devtools
Redux Best practices
Redux saga
The Context API

Make a parallax effect with 10 lines of JavaScript

Thu, 19 Dec 2019 08:00:00 GMT

In this post, we're going to make a nice Parallax effect with HTML, CSS and just 10 lines of JavaScript.

You can check it live here

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

HTML
CSS
JavaScript

HTML

As you can see, we start by wrapping our elements in the main tag.

<main>
  <header>
    <div class="container">
      <i class="fas fa-5x fa-laugh"></i>
      <h3>Welcome</h3>
      <p>Scroll to see how cool i am!</p>
    </div>
  </header>

  <section>
    <h3>Cool like you</h3>
  </section>
</main>

Then, we use two tags to make the parallax effect. The first tag, header holds the elements displayed when the page loads, and the second one, section will be fired on scroll to start the effect.

CSS

As usual, we start by doing some resets, and import the needed font.

@import url("https://fonts.googleapis.com/css?family=Courgette:400,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(135deg, #0056a7, #165fa3, #477aaa);
  font-family: "Courgette", cursive;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  height: 100vh;
  color: #eee;
  z-index: -1;
  text-align: center;
  animation: fadeIn 1.5s ease-in-out;
}

Then, we use position:relative to be able to control the position of the header tag, and when the effect will start the property z-index:-1 will place the header tag behind the section element.

section {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  height: 100vh;
  font-size: 5rem;
  background: #fcdb6d;
  color: #0056a7;
}

Here, we use the opposite for the section selector, by assigning the z-index property to 1 to literally place the section tag above the header when we start scrolling.

.animate-me {
  animation: bounceIn 3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

And last but not the least, we make some animations for the elements entrance. With the bouncing effect for the section and the fading effect for the header. The class animate-me will be added to the section later through JavaScript.

JavaScript

We'll finally make the magic happen with JavaScript, to be able to make the parallax effect when we scroll.

window.addEventListener("scroll", function() {
  const distance = window.scrollY
  document.querySelector("header").style.transform = `translateY(${distance *
    1}px)`
  document.querySelector(
    ".container"
  ).style.transform = `translateY(${distance * 0.3}px)`
  setTimeout(() => {
    document.querySelector("section h3").classList.add("animate-me")
  }, 400)
})

As you can see here, we listen to the scroll event to start the effect.
Then, we assign to the constant distance the amount of scroll through the Y axis(vertically). And select the needed elements from the DOM and access to the transform property.
With that, we can now use the translateY value to dynamically give a value to translateY. The value differs between header and its child element container to just have a more smoother effect. Then, we finish up everything, by adding the animate-me class for the section title for the bouncing effect.

That's all folks!

You can check it live here

Advanced CSS selectors

Thu, 12 Dec 2019 08:00:00 GMT

Selectors in CSS are used to pick elements and style it. They can be very powerful following which one we use. In this post, i will lead you through 6 powerful CSS selectors that will really help you write clean CSS on your next project.

Sorry for the interrupt!

If you're interested in learning CSS in a comprehensive way, I highly recommend this bestseller course: CSS - The Complete Guide 2020 (incl. Flexbox, Grid & Sass)

It's an affiliate link, so by purchasing, you support the blog at the same time.

1. div `>` a

This selector will enable us to select all a elements where the parent element is a div tag.

<!-- This one will be selected -->
<div>
  <a></a>
</div>

<!-- This one won't be selected -->
<p>
  <a></a>
</p>

2. div `+` a

This one will select every a tags placed immediately after a div element. If we have an element between the div and the a tag, that element won't be selected.

<main>
  <!-- This one will be selected -->
  <div></div>
  <a></a>
  <!-- This one won't be selected -->
  <div></div>
  <p></p>
  <a></a>
</main>

3. div `~` a

This one will select every a tag preceded by a div element on the same level. In other words, if the a tag is not immediately preceded by a div element, but has a div tag as a sibling element, that element will be selected.

<main>
  <!-- This one will be selected -->
  <div></div>
  <a></a>
  <!-- This one will be selected -->
  <div></div>
  <p></p>
  <a></a>
  <section>
    <!-- This one will be selected -->
    <div></div>
    <p></p>
    <a></a>
  </section>

  <footer>
    <!-- This one won't be selected -->
    <p></p>
    <a></a>
  </footer>
</main>

4. [attribute`^=`value]

e.g: [class^="list-"] This selector will pick every element that contains a class attribute and which its value begins with list-

<main>
  <!-- This one will be selected -->
  <div class="list-element"></div>
  <!-- This one will be selected -->
  <div class="list-container"></div>
  <!-- This one will be selected -->
  <div class="list-item"></div>
  <!-- This one won't be selected -->
  <div class="list__footer"></div>
</main>

5. [attribute`$=`value]

e.g: [src$=".png"] This one will select every src attribute which its value ends with .png.

<div>
  <!-- This one will be selected -->
  <img src="image1.png" />
  <!-- This one will be not selected -->
  <img src="image2.jpg" />
  <!-- This one will be selected -->
  <img src="image3.png" />
  <!-- This one won't be selected -->
  <img src="image4.svg" />
</div>

6. [attribute`*=`value]

e.g: [class*="-list"] This selector will pick every element whose class attribute contains -list. It does not matter if -list is at the beginning, the middle or at the end of the class's value. The most important is that the value must contain -list.

<main>
  <!-- This one will be selected -->
  <div class="main-list-container"></div>
  <!-- This one will be selected -->
  <div class="primary-list"></div>
  <!-- This one will be selected -->
  <div class="primary-list-item"></div>
  <!-- This one won't be selected -->
  <div class="list-footer"></div>
</main>

Conclusion

Sometimes it's really tough to find the needed element to style due to the fact that our CSS file can be overkill very quick. And using these kind of selectors can be very useful depending on your use-case.

CSS flexbox cheat sheet (with examples)

Thu, 05 Dec 2019 08:00:00 GMT

CSS flexbox makes it easier to design flexible and responsive layout structure without using float or positioning.

Sorry for the interrupt!

If you're interested in learning CSS in a comprehensive way, I highly recommend this bestseller course: CSS - The Complete Guide 2020 (incl. Flexbox, Grid & Sass)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Flex container
Flex Item
- align-self
- order
- flex-grow
- flex-basis
- flex-shrink
- flex

Flex container

This following properties are applied to the flex container.

display

It transforms the container to a flexible one (flexbox) or inline flex container.

flex: This value will transform the elements of the container to flex items.

flex-direction

It specifies in which direction the main axis go.

row: it's the default, flex items will be displayed horizontally and the main axis will go from the left to the right side.

row-reverse: it's the same as row, except the order will be inverted and the main axis will go from the right to the left.

column: flex items will be displayed as a column (vertically) and the main direction will go from top to bottom.

column-reverse: it's the same as a column, except the order will be inverted and the main axis will go from bottom to top.

justify-content

It's used to control how the items should be positioned following the main axis.

center: This value will center all the items.

space-between: It will distribute the available space evenly between the items.

space-around: It will give each flex item the same amount of space on both left and right.

space-evenly: This value ensures that the space between flex items will be the same.

flex-start: it's the default, the items will be positioned at the start of the flex container.

flex-end: the items will be positioned at the end of the flex container.

align-items

It's used to control how the items should be positioned along the cross axis.

stretch: it's the default, the flex items will be stretched along the cross axis.

center: This value will center the items along the cross axis.

flex-start: the items will be positioned at the start of the cross axis.

flex-end: the items will be positioned at the end of the cross axis.

flex-wrap

wrap: This value will put the overflowing items into new line.

flex-flow

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
e.g: flex-flow: column wrap;

align-content

It does the same job as align-items, except this property aligns the flex container along the cross-axis if extra space is available. Notice that the property will be applied only if the number of flex containers is more than one.

stretch: it's the default, flex containers stretch to take up the remaining space.

center: This value will center the flex container along the cross axis.

flex-start: the flex container will be positioned at the start of the cross axis.

flex-end: the flex container will be positioned at the end of the cross axis.

space-between: It will distribute the available space evenly between flex containers.

space-around: It will give each flex container the same amount of space on both left and right.

Flex Item

This following properties are applied to the flex item.

align-self

The property align-items sets the default alignment for all the flex items, align-self enables us to override this default alignment for an individual item.

auto: it's the default.
center: This value will center the flex item towards its container.

flex-start: the flex item will be positioned at the start of the cross axis.

flex-end: the flex item will be positioned at the end of the cross axis.

stretch: the flex item will be stretched along the cross axis.

order

The order property controls the order in which children of a flex container appear within the flex container. The value must be an integer.

e.g: order: -1;

flex-grow

It gives the flex item the ability to grow. The value must be positive.

e.g: flex-grow: 1;

flex-basis

It sets the flex basis, in other words the width.

e.g: flex-basis: 30%;

flex-shrink

It controls how a flex item can shrink.

flex-shrink:0 it will not shrink

flex-shrink:1 it will shrink.

e.g: flex-shrink:0

flex

We can simplify flex-grow, flex-basis flex-shrink with flex followed by them values.

e.g: flex: 0 30% auto

Build a testimonial card with HTML, CSS, and JavaScript

Thu, 28 Nov 2019 08:00:00 GMT

In this post we are going to have some good time with CSS animations and DOM manipulation by building an animated testimonial card using HTML, CSS and JavaScript.

You can check it live here

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

HTML
CSS
JavaScript

HTML

We start by wrapping our elements in the main tag.

<main>
  <!--This is the current testimonial-->
  <div class="testimonial-container testimonial-active">
    <div class="testimonial-header"></div>
    <div class="testimonial-body">
      <img alt="Avatar" src="" class="testimonial-avatar" />
      <h1></h1>
      <p></p>
    </div>
    <div class="testimonial-footer">
      <div>
        <span><i class="fab fa-google"></i></span>
        <span><i class="fab fa-linkedin"></i></span>
        <span><i class="fab fa-twitter"></i></span>
      </div>
      <div>
        <button id="next">
          <i class="fa fa-3x fa-chevron-circle-right"></i>
        </button>
      </div>
    </div>
  </div>
</main>

We gonna have two main div, the first will be used for the actual testimonial card and the second in the code block below will help us to show the next testimonial card.

Notice that the HTML content will be added through javaScript.

      <!--This is the next testimonial-->
      <div class="testimonial-ghost-container">
        <div class="testimonial-ghost-header"></div>
        <div class="testimonial-ghost-body">
          <img alt="Avatar" src="" />
          <h1></h1>
          <p></p>
        </div>
        <div class="testimonial-ghost-footer">
          <div>
            <span><i class="fab fa-google"></i></span>
            <span><i class="fab fa-linkedin"></i></span>
            <span><i class="fab fa-twitter"></i></span>
          </div>
          <div>
            <button id="ghost-next">
              <i class="fa fa-3x fa-chevron-circle-right"></i>
            </button>
          </div>
        </div>
      </div>
    </main>

As i say earlier, this div will be hidden at the start. But when we switch to the next testimonial, it will be used to show the two testimonial cards at the same time.

CSS

As usual, we start the CSS part with some resets.

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700&display=swap");

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

body {
  background: #f5f6f7;
  line-height: 1.6;
  font-family: "Roboto", sans-serif;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  max-width: 100%;
  position: relative;
}

Then, change the font, set the background of the body to a light-grey color. Afterwards, the main tag takes the full width and height, and we use display: flex to literally bring the testimonial card to the center of the viewport.

.testimonial-container,
.testimonial-ghost-container {
  width: 22rem;
  height: 28rem;
  background: #fff;
  border-radius: 1.2rem;
  overflow: hidden;
  position: absolute;
}
.testimonial-active {
  z-index: 1;
  box-shadow: 0.5rem 0.5rem 1rem rgba(51, 51, 51, 0.2), 0.5rem 0.5rem 1rem rgba(51, 51, 51, 0.2);
}

.testimonial-header,
.testimonial-ghost-header {
  height: 10rem;
  background-image: linear-gradient(
      to right,
      rgba(239, 124, 0, 0.8),
      rgba(255, 181, 102, 0.8)
    ), url("https://shorturl.at/grwP6");
  background-size: cover;
  background-position: cover;
}

We continue by styling our two card elements. In the .testimonial-container and .testimonial-ghost-container classes, we use position: absolute; to sit these two elements one over the other following the main tag position. Then, the .testimonial-active class will help us bring the active testimonial card to the front.

The next two classes are used to style the card header. It will have an image doubled by a gradient color as background.

.testimonial-avatar,
.testimonial-ghost-body img {
  border-radius: 100%;
  display: block;
  margin: auto;
  margin-top: -4rem;
  border: 0.5rem solid #fff;
  z-index: 100;
}

.testimonial-body,
.testimonial-ghost-body {
  padding: 0 1rem;
  text-align: center;
  margin-bottom: 1rem;
}

This part styles the avatar of our card. We use a negative value -4rem on the margin-top property to bring the avatar in the middle of the card header and the z-index property ensures that the element will be always at the top of the header.

.testimonial-ghost-header {
  background-image: linear-gradient(
      to right,
      rgba(119, 119, 119, 0.8),
      rgba(119, 119, 119, 0.8)
    ), url("https://shorturl.at/grwP6");
}

.testimonial-ghost-body img {
  filter: blur(2px);
}

.testimonial-ghost-body h1,
.testimonial-ghost-body p i,
.testimonial-ghost-footer button i,
.testimonial-ghost-footer span i {
  color: #777;
}

.testimonial-footer,
.testimonial-ghost-footer {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

When a change occurs, the previous testimonial card's style changes. the avatar will be blurred with filter: blur(2px);. The card header and elements color will be turned to dark, just for having a nice style.

.testimonial-active-animated {
  animation: moveRight 1.5s ease-in-out;
}

.testimonial-inactive-animated {
  animation: moveLeft 1.5s ease-in-out;
}

@keyframes moveRight {
  0% {
    transform: translateX(0);
    box-shadow: none;
  }
  50% {
    transform: translateX(-10rem);
    box-shadow: none;
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
    z-index: 2;
  }
  50% {
    transform: translateX(18rem) scale(0.96);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) scale(0.98);
    opacity: 0.2;
  }
}

This code block will be essential when it comes to switch to the next testimonial. We have two animations: the first moveRight will move the element from the left to the right with the transform property and the box-shadow will be hidden to just have a more natural effect.

The second animation moveLeft will move from the left to the right and scale down a little bit with transform: translateX(18rem) scale(0.96). It will also have a fade in effect with the opacity property. And the z-index property will place the element at the top when the animation starts.

The .testimonial-active-animated and .testimonial-active-animated will be attached to the appropriate testimonial cards.

JavaScript

As you can see here, we start by selecting the two testimonial containers.

const testimonialContainer = document.querySelector(".testimonial-container")
const testimonialGhost = document.querySelector(".testimonial-ghost-container")
const nextBtn = document.querySelector("#next")
const testimonials = [
  {
    name: "Sarah Drucker",
    text:
      "Working with John Doe was a real pleasure, he helps me extending my business online.",
    avatar: "https://shorturl.at/eqyGW",
  },
  {
    name: "Nicolas Jaylen",
    text:
      "My business was broken, then i start working with John Doe, and now everything works fine.",
    avatar: "https://shorturl.at/ptC58",
  },
  {
    name: "Awa Fall",
    text:
      "John Doe helps me a lot from designing my website to make it live in just 5 weeks.",
    avatar: "https://shorturl.at/lwBY1",
  },
]
let counter = 0

Then, we have a button for listening the click event and an array of testimonials that will be displayed dynamically following the counter variable.

const handleFirstTestimonial = () => {
  // Author avatar selection
  testimonialContainer.children[1].children[0].src = testimonials[0].avatar
  // Testimonial Author selection
  testimonialContainer.children[1].children[1].innerHTML = testimonials[0].name
  // Testimonial text selection
  testimonialContainer.children[1].children[2].innerHTML = `
  <i class="fas fa-quote-left"></i>
  ${testimonials[0].text}
  <i class="fas fa-quote-right"></i>
  `
}

The handleFirstTestimonial() function helps us showing the first testimonial of the array. Here, we traverse the DOM through the testimonialContainer element to select child elements. We set the avatar, the author of the testimonial, and the text with the first testimonial on the testimonials array.

const activeTestimonial = () => {
  testimonialContainer.classList.add("testimonial-active-animated")
  // Author avatar selection
  testimonialContainer.children[1].children[0].src =
    testimonials[counter].avatar
  // Testimonial Author selection
  testimonialContainer.children[1].children[1].innerHTML =
    testimonials[counter].name
  // Testimonial text selection
  testimonialContainer.children[1].children[2].innerHTML = `<i class="fas fa-quote-left"></i>
  ${testimonials[counter].text}
  <i class="fas fa-quote-right"></i>`

  setTimeout(() => {
    // Remove the active animated class
    testimonialContainer.classList.remove("testimonial-active-animated")
  }, 1400)
}

Then, when the user switches to the next testimonial, we call the activeTestimonial() function to handle it. And, use the testimonialContainer to traverse the DOM and set appropriate data to the card elements. And make the animation happen with testimonialContainer.classList.add("testimonial-active-animated");, and finally remove the animation after 1.4 seconds to be able to animate it again.

const inactiveTestimonial = () => {
  testimonialGhost.classList.add("testimonial-inactive-animated")
  let newCounter = counter
  if (newCounter === 0) {
    newCounter = testimonials.length
  }
  // image selection
  testimonialGhost.children[1].children[0].src =
    testimonials[newCounter - 1].avatar
  // title selection
  testimonialGhost.children[1].children[1].innerHTML =
    testimonials[newCounter - 1].name
  // text selection
  testimonialGhost.children[1].children[2].innerHTML = `<i class="fas fa-quote-left"></i>
  ${testimonials[newCounter - 1].text}
  <i class="fas fa-quote-right"></i>`
  setTimeout(() => {
    // Remove the active animated class
    testimonialGhost.classList.remove("testimonial-inactive-animated")
  }, 1400)
}

Like the activeTestimonial(), the inactiveTestimonial function will handle the inactive testimonial card. We traverse the DOM with testimonialGhost to select elements and set the data to the previous testimonial card.

Here, we use a newCounter to just handle the testimonials array if the counter is equal to 0, we reassign the newCounter with the last testimonial card of the array.

nextBtn.addEventListener("click", () => {
  if (counter === testimonials.length - 1) {
    counter = 0
    inactiveTestimonial()
    activeTestimonial()
  } else {
    counter++
    inactiveTestimonial()
    activeTestimonial()
  }
})

handleFirstTestimonial()

To make all the magic happen, we need to listen to the click event. And check if the counter is equal to the last element of the array. If it's the case reinitialize the counter to 0 and call the needed functions. Otherwise, increment the counter variable and call inactiveTestimonial() and activeTestimonial().
Then, to start everything when the page loads, we call the handleFirstTestimonial() function.

That's all folks

You can check it live here

Fullscreen slider with HTML, CSS and JavaScript

Thu, 21 Nov 2019 08:00:00 GMT

In this post we gonna build a Fullscreen slider using HTML, CSS and JavaScript.

You can check it live here

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

HTML
CSS
JavaScript

HTML

As you can see, we start by wrapping everything in the main tag.

<main>
  <div class="slider">
    <div class="slider--content">
      <button class="slider__btn-left">
        <i class="fas fa-angle-left"></i>
      </button>
      <div class="slider--feature">
        <h1 class="slider--title">Tasty</h1>
        <p class="slider--text"></p>
        <button class="slider--btn">Get started</button>
      </div>
      <button class="slider__btn-right">
        <i class="fas fa-angle-right"></i>
      </button>
    </div>
  </div>
</main>

Then, hold the slider elements in the .slider class. We will also need two buttons to be able to go to the next or previous slide. The .slider--feature will hold the title and the description of the slide elements.
By the way, i use Font awesome for the icons, so you will need to create an account here then add the link to the head tag.

CSS

As usual, we start the CSS by doing some resets.

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
  font-family: "Open Sans", sans-serif;
  background: #444;
}

Then, change the background, the font family and import the font Open Sans from google fonts.

.slider {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
}

.slider--content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

.slider--feature {
  text-align: center;
}

.slider--title {
  font-size: 2.5rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
}

.slider--text {
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  margin: 0.5rem 0;
}

Afterwards, we use the .slider class to make the slide element using the full width and height of the viewport and prepare it to receive the image later as the background with the help of javaScript.
Then, set display:flex and justify-content:space-between to the .slider--content class to distribute equitably elements following the available space.

.slider__btn-right,
.slider__btn-left {
  background: transparent;
  border: none;
  outline: none;
  font-size: 4rem;
  color: #eee;
  padding: 0 1rem;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

.slider--btn {
  background: #fff;
  text-transform: uppercase;
  border: none;
  color: #444;
  border: 1px solid #444;
  outline: none;
  font-weight: 700;
  padding: 0.8rem 2rem;
  cursor: pointer;
}

.slider__btn-left:hover,
.slider__btn-right:hover {
  transform: scale(0.95);
}

As you can see, this code block is used to style buttons. The .slider__btn-right and .slider__btn-left classes help us style the left and right button of the slide. We also use transition: transform 0.1s ease-in-out to make a little scale effect on hover with transform: scale(0.95). And the .slider--btn class is applied to the call to action button to have a nice style.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  animation: fadeIn 1s;
}

Here, we use @keyframes to apply a fade in animation to the slide element. And the .fadeIn class will be added to the slide dynamically when a change occurs.

JavaScript

As usual, we start the JavaScript part by selecting the needed elements.

const slideContainer = document.querySelector(".slider")
const sliderText = document.querySelector(".slider--text")
const btnLeft = document.querySelector(".slider__btn-left")
const btnRight = document.querySelector(".slider__btn-right")

const sliderImages = [
  {
    src: "https://drive.google.com/uc?id=1BzhhKeOc9XyZMPXnZAi_JiOYdZrwLYu-",
    text: "Taste the magic",
  },
  {
    src: "https://drive.google.com/uc?id=1M1TR1HjJCj-TuOa54jzty8QK9QUdNfSC",
    text: "Taste the incredible",
  },
  {
    src: "https://drive.google.com/uc?id=1twyebwsDDBtPiyFHxTIf9P26sDGiq5Qi",
    text: "Taste the dream",
  },
]

let slideCounter = 0

Then, we create an array of images that will be used as a background image for the slide. And also, declare the variable slideCounter to be able to count the number of slides.

const startSlider = () => {
  slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ), url(${sliderImages[0].src})`
  sliderText.innerHTML = sliderImages[0].text
}

The startSlider() function will set the first image of sliderImages array as background to the slide. I also style the background with linear-gradient() to darken the image a little bit, and finally append the adequate text to the slide element.

btnRight.addEventListener("click", function() {
  if (slideCounter === sliderImages.length - 1) {
    slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ), url(${sliderImages[0].src})`
    sliderText.innerHTML = sliderImages[0].text
    slideCounter = -1

    slideContainer.classList.add("fadeIn")
    setTimeout(() => {
      slideContainer.classList.remove("fadeIn")
    }, 1000)
  }
  slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
      ),url(${sliderImages[slideCounter + 1].src})`
  sliderText.innerHTML = sliderImages[slideCounter + 1].text
  slideCounter++
  slideContainer.classList.add("fadeIn")
  setTimeout(() => {
    slideContainer.classList.remove("fadeIn")
  }, 1000)
})

Here, we listen to a click event on the right button on the slide. Then, we check if the counter (slideCounter) is equal to the last slide. If it's the case, restart the slide with the first image and text of the array. Then, add the fadeIn class to animate the slide on entrance.
Afterwards, if the counter (slideCounter) is not equal to the last slide, we can set the next slide with the appropriate data and increment the slideCounter variable and finally remove the animation after 1 second to be able to animate it again.

btnLeft.addEventListener("click", function() {
  if (slideCounter === 0) {
    slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ),url(${sliderImages[sliderImages.length - 1].src})`
    sliderText.innerHTML = sliderImages[sliderImages.length - 1].text
    slideCounter = sliderImages.length
    slideContainer.classList.add("fadeIn")
    setTimeout(() => {
      slideContainer.classList.remove("fadeIn")
    }, 1000)
  }

  slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ),url(${sliderImages[slideCounter - 1].src})`
  sliderText.innerHTML = sliderImages[slideCounter - 1].text
  slideCounter--
  slideContainer.classList.add("fadeIn")
  setTimeout(() => {
    slideContainer.classList.remove("fadeIn")
  }, 1000)
})

startSlider()

As you can see here, we use the same process to change the slide with the left button except the fact that we check if the counter is equal to zero. And if it's the case, go to the last slide. Then, if not, go the previous slide and decrement the counter variable.
And finally, start the slider with the startSlider() function.
You can check it live here

Better Http request with interceptors in Angular 8 and beyond

Thu, 14 Nov 2019 08:00:00 GMT

Dealing with API based token is sometimes cumbersome. Due to the fact that, on every request, we have to send a token as parameter to be able to reach out the server.
In Angular, it becomes easier with the help of HttpClient interceptors. In this tutorial, i will lead on how to set up a token once and use it on every request with interceptors.

Sorry for the interrupt!

If you're interested in learning Angular in a comprehensive way, I highly recommend this bestseller course: Angular - The Complete Guide (2020 Edition)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Prerequisites
Interceptors
Conclusion

Prerequisites

Set up a new angular app

ng new my-app

Then add a service file that will handle the logic of sending the request.

ng generate service data

After successfully generated the service add the following lines to send the request to the server.

import { Injectable } from "@angular/core";
import { HttpClient, HttpParams } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get("https://example.com/api/data", {
      params: new HttpParams().set(
        "auth-token",
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9"
      )
    });
  }

  getUsers() {
    return this.http.get("https://example.com/api/users", {
      params: new HttpParams().set(
        "auth-token",
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9"
      )
    });
  }
}

And in your app.component.ts call the service we've created to achieve the request.

import { Component } from "@angular/core";

import { DataService } from "./data.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  constructor(private dataService: DataService) {}

  showData() {
    this.dataService.getData().subscribe(response => {
      // Write your logic here to handle the data
      console.log(response);
    });
  }

  showUsers() {
    this.dataService.getUsers().subscribe(response => {
      // Write your logic here to handle the data
      console.log(response);
    });
  }
}

As you can see in the data.sevice.ts file, we use the same params for both getData() and getUsers() methods to send the token.
Now it's time to optimize it with interceptors.

Interceptors

Http Interceptors were introduced with the version 4.3 of Angular. They help a lot with handling request with the same parameters or headers.
To implement it, we need to create a new file auth.interceptor.ts. You can name it whatever you like, but it's a convention to add .interceptor to be clear about what's inside the class file. Afterwards add this following code block to the file.

import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent,
} from "@angular/common/http"
import { Observable } from "rxjs"

export class AuthInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const cloneReq = req.clone({
      params: req.params.set(
        "auth-token",
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9"
      ),
    })
    return next.handle(cloneReq)
  }
}

First, we need to import HttpInterceptor and implement it to our class to be able to access to the intercept() method. Then, we pass two arguments req and next to that method. The first is the request of type HttpRequest and can have any type of data, and the second next will handle the request and let it continue its journey.
The intercept() method is of type Observable and can receive any type of events.
The Http request is by default immutable, we can't edit it. Therefore, we need to create a copy by cloning the request with req.clone(). Now with this method, we can configure our params directly and return the cloneReq request and let it continue its way to the server.
Now, our interceptor will add the token as a parameter on every request before letting it reach out the server. We can even simplify our data.service.ts file by removing everything related to params.

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get("https://example.com/api/data");
  }

  getUsers() {
    return this.http.get("https://example.com/api/users");
  }
}

Conclusion

Http interceptors are useful on every matter. It's kind like middleware in back-end development. We can use it to modify our requests and also our responses.

Build an image gallery with HTML, CSS, and JavaScript

Thu, 07 Nov 2019 08:00:00 GMT

CSS grid is awesome, we can't say it enough. It helps a lot on making our website responsive. Sometimes we even don't need media queries to make our layout fully responsive. In this post, I will lead you on how to build a responsive image gallery with CSS grid (only) and some JavaSript (to make it reactive), and the images will be fetched from the unsplash API. So you'll need to create an account here to get your API key.

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

HTML
CSS
JavaScript

HTML

The HTML is relatively simple as you can see.

<main>
  <div class="image--container"></div>
  <div class="image--selection"></div>
</main>

We have two div elements, the first with image--container class will be the viewer and the second div tag will enable us to select an image from the gallery. And by the way img tags will be created by JavaScript.

CSS

For the CSS, we will first make some resets to remove spaces and import Open Sans from google fonts.

@import url("https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #444;
}

main {
  padding: 0 0.5rem;
  height: 100vh;
}

Then, change the background-color for the body tag and set the height of the main tag to fit the viewport height.

.image--gallery {
  width: 100%;
  height: 32rem;
  display: block;
  margin: auto;
  border: 5px solid #222;
  object-fit: cover;
}

.image--selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  justify-content: center;
  align-items: center;
}

.image__item {
  width: 100%;
  height: 8rem;
  display: block;
  margin: auto;
  margin-bottom: 0.5rem;
  border: 5px solid #222;
  object-fit: cover;
  cursor: pointer;
}

To make the image viewer looking nice, we have to use .image--gallery to expand the width to 100% to have a responsive image and the most important set the object-fit property to cover. It will just ensure that the image fit its container element.

Then, for the image gallery, we use .image--selection to have a grid system. After displaying it in grid, we have to set grid-template-columns to repeat(auto-fit, minmax(9rem, 1fr)).
The repeat() function takes two arguments: the number of times to repeat the value and the value itself. The auto-fit value allows us to wrap our columns into rows when we lack spaces to display every elements in the same column in our viewport. And the minmax() function will set the minimum size of the element to 9rem and the maximum size to 1fr.

justify-content and align-items help us centering the grid elements.
Finally, the .image__item class serves to resize each image in the gallery.
rem is a relative unit of the font size(16px).
fr is just a fractional unit.

.loader {
  text-align: center;
  margin-top: 20%;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}

.animate-entrance {
  animation: BounceIn 0.8s;
}

@keyframes BounceIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

As you can see here, we use .loader class to style the alignment, font, margin and color of the text to display if we have no images.
Then, .animate-entrance class helps us making some animations on the image viewer. For that, we use the animation property and the BounceIn value defined below with @keyframes. It will just bounce in with a fade in effect and scale a little bit. And the animation will last 0.8 seconds.

JavaScript

We start the javaScript part by selecting some elements.

const image_gallery = document.querySelector(".image--container")
const image_container = document.querySelector(".image--selection")
const loading = '<h1 class="loader">Loading...</h1>'

The first image_gallery is the viewer element, and the second image_container is the image gallery. Both elements are selected by their class names with the querySelector method. The last one loading will be used if we have no images to show.

const showImages = () => {
  // Show loading text if no data
  if (image_container.children.length === 0) image_container.innerHTML = loading
  fetch(`https://api.unsplash.com/photos?client_id=${apiKey}`)
    .then(res => {
      res.json().then(images => {
        // Call the function to create the gallery
        createImageGallery(images)
      })
    })
    .catch(e => {
      console.log(e)
    })
}

The showImages() function will display images fetched from the unsplash API. First, we need to check if the image_container have a child element or not, in other words if the image gallery is created in the DOM or not and display Loading... while fetching data from unsplash with the fetch API. Then, if we get images pass it to the createImageGallery() function as an argument to display images otherwise catch the error.

For the apiKey in the url, you need to create an account here and replace it with your API key.

const createImageGallery = images => {
  let output = ""
  // Show the first image on the viewer
  image_gallery.innerHTML = `<img src="${images[0].urls.regular}" class="animate-entrance image--gallery" alt="${images[0].alt_description}">`
  setTimeout(() => {
    image_gallery.children[0].classList.remove("animate-entrance")
  }, 500)
  // show unselected images
  images.forEach(({ urls, alt_description }) => {
    output += `<img src="${urls.regular}" alt="${alt_description}" class="image__item" />`
  })
  image_container.innerHTML = output
}

To create the viewer in the DOM, we use the property innerHTML to append the element to image_gallery. Then, we remove animate-entrance class after 0.5 seconds to be able to animate the viewer again.

And we loop through images(data fetched from unsplash) and just pull out urls and alt_description to create the img tag and append it to image_container to create the image gallery's selection on the DOM.

const changeImage = e => {
  // Get the viewer image element
  const image = image_gallery.children[0]
  if (e.target.src) {
    // change the image
    image.classList.add("animate-entrance")
    image.src = e.target.src
    setTimeout(() => {
      image.classList.remove("animate-entrance")
    }, 800)
  }
}

// Event listeners
document.addEventListener("DOMContentLoaded", showImages)
image_container.addEventListener("click", changeImage)

To change the image on the viewer, we need to get the child element(img tag) of image_gallery. Then, check if the event provided as an argument contains a src attribute of not. And then change the viewer image with the selected one and add the .animate-entrance class to the img tag. Then, we remove animate-entrance class after 0.5 seconds to be able to animate the viewer again.

And to make it happen, we need to listen to two events. The first DOMContentLoaded will fire the showImages() function to display all images when the initial HTML document will be completely loaded. The second listens for click event on the image_container element and change the viewer image with the function changeImage().

You can check it live here

That all folks!!!

How to replace Component lifecycle with useEffect hook in React?

Mon, 04 Nov 2019 08:00:00 GMT

Before React 16.8, we were forced to use class based component to have access in component lifecycle. And now with Hooks, we are now able to use functional component for state management, data fetching etc. We can now replace component lifecycle like componentDidMount, componentDidUpdate and componentWillUnmount with useEffect in our React component.

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

1. componentDidMount

The componentDidMount() method runs after the component output has been rendered to the DOM. This is a good place to cause side-effects.

// With ccomponentDidMount()
componentDidMount() {
    console.log('Hello World');
}

// with useEffect()
useEffect(() => {
    console.log('Hello World');
}, [])

If we don't pass an empty array to useEffect, it will run on every change. Therefore, we must give as second argument an empty array to mimic the componentDidMount behavior. It tells to React that your effect doesn’t depend on any values from props or state, so it never needs to re-run, useEffect will run only once after the component is created.

2. componentDidUpdate

The componentDidUpdate() method is invoked immediately after updating occurs.

// With ccomponentDidUpdate()
componentDidUpdate(prevProps) {
    console.log(`Hello World ${prevProps}`);
}

// with useEffect()
useEffect(() => {
    console.log('Hello World');
}, [prevProps])

When we pass a value(prevProps) to the array, it tells to useEffect to run only if the value change.

3. componentWillUnmount

The componentWillUnmount() method is called immediately before a component is unmounted and destroyed. It is a good place to do some cleanup works.

// With ccomponentDidUnmount()
componentWillUnmount() {
    console.log('Hello World');
}

// with useEffect()
useEffect(() => {
    console.log('Hello World');
    return () => {
        console.log('Do some cleanup');
    }
}, [])

By returning an anonymous function with useEffect, it will run before the component unmounting. And the empty array passed as second argument tells to useEffect to run when the component will be mounted or unmounted.

5 reasons to use Reactive form in Angular

Thu, 31 Oct 2019 08:00:00 GMT

This post assumes that you have at least a basic knowledge about Angular and specially Angular Forms.

Forms are a core element, when it comes to build apps. We use it to log in everyday, submit data, post a request, etc. In Angular we have two main ways to handle forms: Reactive form and Template-driven form. Both are useful depending on the use-case.

In these following lines, I will lead you through 5 reasons on why you should use Reactive instead of Template-driven forms in Angular.

Sorry for the interrupt!

If you're interested in learning Angular in a comprehensive way, I highly recommend this bestseller course: Angular - The Complete Guide (2020 Edition)

It's an affiliate link, so by purchasing, you support the blog at the same time.

1. Immutability

Reactive form keeps the data model pure by providing it as an immutable data structure. It uses an immutable approach to manage the state of a form. In other words, it will not mutate the form state. Each time a change occurs to the form, the FormControl instance will not update the existing data model, it will return a new state (a new data model). Reactive form uses observable operators to return a new data model. In that way, it will always maintain the integrity of the model between changes.

For the template-driven form, it uses the mutable approach. Due to the fact that it relies heavily on two-way data binding with ngModel to update the data model in the component following changes made in the template.

2. Predictability

Reactive form is predictable because it access synchronously to the data model. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed in a synchronous way. It also uses observable streams to track changes in the form. And that predictability makes testing easy.

The template-driven form is asynchronous and therefore unpredictable.

3. Structured data flow

Template-driven form directive ngModel is responsible for creating and managing the FormControl instance for a given form element. Reactive form access directly to the FormControl instance after the creation of the link with FormControlDirective due to the fact that reactive form is leaded by component class. And therefore each element in the view(template) is linked to the FormControl (form model). And when a change occurs, and a view update is needed, it will not re-render the DOM because reactive form is synchronous and it's not dependent to the UI rendering.

In template-driven forms, each form element is linked to a directive that manages the form model internally.

4. Scalability

Due to the fact that reactive form is synchronous makes scaling easier. It is reusable and helps a lot with large-scale forms. Template-driven form is not reusable because it provides asynchronous access to the form model and therefore the scalability is tough with it.

5. Testing

In a small Angular app, testing is not mandatory. But when you work in larger or more complex app, it becomes obvious to test it before production. And reactive forms are more easy to test than template-driven forms. Because it provides synchronous access to the form and data models, and it can be tested without rendering the UI.

Template-driven form requires more knowledge of the change detection process and an understanding of how directives run on each cycle to ensure that elements are queried, tested, or changed at the correct time.

Conclusion

Reactive and Template-driven forms are useful and different in many points. In a very small form using a template-driven form is better because it's very easy to setup. But in the case which forms become a key part of your app, using reactive form is required because it's more predictable, reusable, scalable and testable.

Awesome Stepper Form with HTML, CSS, and JavaScript

Mon, 28 Oct 2019 08:00:00 GMT

A stepper or multi-step form is a handy feature to have when dealing with long-forms. It enhances your user experience with a more user-friendly form format. In this tutorial, we will be creating a stepper form using HTML, CSS, and JavaScript.

You can check it live on Codepen : Stepper Form

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Let's get started!

Markup

As you can see, the HTML file is relatively simple.

<main>
  <div class="stepper">
    <div class="step--1 step-active">Step 1</div>
    <div class="step--2">Step 2</div>
    <div class="step--3">Step 3</div>
    <div class="step--4">Finish</div>
  </div>
  <form class="form form-active">
    <div class="form--header-container">
      <h1 class="form--header-title">
        Personal Info
      </h1>

      <p class="form--header-text">
        Tell us more about you.
      </p>
    </div>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Email" />
    <input type="text" placeholder="Password" />
    <button class="form__btn" id="btn-1">Next</button>
  </form>
  <form class="form">
    <div class="form--header-container">
      <h1 class="form--header-title">
        Company Info
      </h1>

      <p class="form--header-text">
        Tell us more about your company.
      </p>
    </div>

    <input type="text" placeholder="Company Name" />
    <input type="text" placeholder="Job title" />
    <input type="text" placeholder="Location" />
    <button class="form__btn" id="btn-2-prev">Previous</button>
    <button class="form__btn" id="btn-2-next">Next</button>
  </form>
  <form class="form">
    <div class="form--header-container">
      <h1 class="form--header-title">
        Social account
      </h1>

      <p class="form--header-text">
        Tell us more about your social account.
      </p>
    </div>
    <input type="text" placeholder="Linkedin" />
    <input type="text" placeholder="Twitter" />
    <input type="text" placeholder="Github" />
    <button class="form__btn" id="btn-3">Submit</button>
  </form>
  <div class="form--message"></div>
</main>

Besides the main tag, we also define a div that holds the stepper element. Then, we use three forms with different buttons id which will soon make the stepper effect with the help of JavaScript.

With this in place, we can now style the project with CSS.

Styling

Here, we begin with some resets and then set the font-family and background-color properties for the body tag.

@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #f5f6f7;
  font-family: "Nunito", sans-serif;
}

main {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

Next, we use the flex value on the main tag to center the element relative to the body tag.

.stepper {
  width: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 5%;
}

.step--1,
.step--2,
.step--3,
.step--4 {
  width: 5rem;
  padding: 0.5rem 0;
  background: #fff;
  color: #666;
  text-align: center;
}
.step--1,
.step--2,
.step--3 {
  border-right: 1px solid #666;
}

For the Stepper elements, we rely on CSS flexbox to align them horizontally and then use their class names to add the style.

.form {
  background: #fff;
  text-align: center;
  position: absolute;
  width: 25rem;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
  display: none;
  border-radius: 1rem;
  overflow: hidden;
}
.form--header-container {
  background: linear-gradient(to right, rgb(51, 51, 51), #919191);
  color: #fff;
  height: 6rem;
  padding: 1rem 0;
  margin-bottom: 2rem;
}

.form--header-title {
  font-size: 1.4rem;
}

.form--header-text {
  padding: 0.5rem 0;
}

input[type="text"] {
  padding: 0.8rem;
  margin: auto;
  margin-top: 0.5rem;
  width: 20rem;
  display: block;
  border-radius: 0.5rem;
  outline: none;
  border: 1px solid #bdbdbb;
}

.form__btn {
  background: #333;
  color: #fff;
  outline: none;
  border: none;
  padding: 0.5rem 0.7rem;
  width: 7rem;
  margin: 1rem auto;
  border-radius: 0.9rem;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.form--message-text {
  width: 25rem;
  background: #fff;
  color: #444;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 1.4rem;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
  animation: fadeIn 0.8s;
  border-radius: 1rem;
}

In the beginning, we hide all three forms. Only the form that contains the class active class will be shown.

In the form--header-container class, we use linear-gradient to style the form header.

Next, in the form--message-text class, we add the animation property to have a fade-in effect when the form is submitted successfully.

.form-active {
  z-index: 1000;
  display: block;
}
.form-active-animate {
  animation: moveRight 1s;
}
.form-inactive {
  display: block;
  animation: moveLeft 1s;
}

.step-active {
  background: #666;
  color: #fff;
  border: 1px solid #666;
}

We use the form-active class to show the current form. And also the property z-index to put the form on top of other elements.

Next, we use the form-active-animate class to make a nice animation entrance from the left to the right. We also have the class name form-inactive that helps hide the previous form.

@keyframes moveRight {
  0% {
    transform: translateX(-27rem) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateX(0rem) scale(1);
    opacity: 1;
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(0rem) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(27rem) scale(0.9);
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

As you can see here, we rely on keyframes to make the animation.

The first animation, moveRight will move the element from left to right using the property transform.

For the second animation, this is relatively the same process, except the element will move more on the right side.

The last animation, fadeIn, will start the fade-in effect when the element shows.

JavaScript

As you can see here, we listen to the click event and then use the gotoNextForm function to handle it.

const formBtn1 = document.querySelector("#btn-1")
const formBtnPrev2 = document.querySelector("#btn-2-prev")
const formBtnNext2 = document.querySelector("#btn-2-next")
const formBtn3 = document.querySelector("#btn-3")

To interact with the DOM, we need to select all form buttons using the querySelector method.

// Button listener of form 1
formBtn1.addEventListener("click", function(e) {
  gotoNextForm(formBtn1, formBtnNext2, 1, 2)
  e.preventDefault()
})

// Next button listener of form 2
formBtnNext2.addEventListener("click", function(e) {
  gotoNextForm(formBtnNext2, formBtn3, 2, 3)
  e.preventDefault()
})

// Previous button listener of form 2
formBtnPrev2.addEventListener("click", function(e) {
  gotoNextForm(formBtnNext2, formBtn1, 2, 1)
  e.preventDefault()
})

// Button listener of form 3
formBtn3.addEventListener("click", function(e) {
  document.querySelector(`.step--3`).classList.remove("step-active")
  document.querySelector(`.step--4`).classList.add("step-active")
  formBtn3.parentElement.style.display = "none"
  document.querySelector(".form--message").innerHTML = `
   <h1 class="form--message-text">Your account is successfully created </h1>
   `
  e.preventDefault()
})

Here, we start by passing in the form ids as parameters and then use the method preventDefault() on the event to prevent the page reload.

The listener formBtn3 is a bit different because we have to show a message to the user. That's why we use innerHTML to append the content.

const gotoNextForm = (prev, next, stepPrev, stepNext) => {
  // Get form through the button
  const prevForm = prev.parentElement
  const nextForm = next.parentElement
  const nextStep = document.querySelector(`.step--${stepNext}`)
  const prevStep = document.querySelector(`.step--${stepPrev}`)
  // Add active/inactive classes to both previous and next form
  nextForm.classList.add("form-active")
  nextForm.classList.add("form-active-animate")
  prevForm.classList.add("form-inactive")
  // Change the active step element
  prevStep.classList.remove("step-active")
  nextStep.classList.add("step-active")
  // Remove active/inactive classes to both previous an next form
  setTimeout(() => {
    prevForm.classList.remove("form-active")
    prevForm.classList.remove("form-inactive")
    nextForm.classList.remove("form-active-animate")
  }, 1000)
}

Here, we traverse the DOM using the parentElement property on both prevForm and nextForm variables to select the form element.

Next, we use the variables to select the form steps from the stepper element.

After that, we add the classes form-active and form-active-animate to the next form element to have a nice animation effect.

Next, we remove form-active, form-inactive and form-active-animate classes from the forms after 1 second using setTimeout().

Great! We are done building an Awesome Stepper Form with HTML, CSS, and JavaScript.

You can follow me on Twitter to get notified when a new article is published.

Thanks for reading!

ibrahima-ndaw.com RSS Feed

Using custom background image in Tailwind CSS (incl. dark mode)

Sorry for the interrupt!

Setting up a Next.js and Tailwind CSS app

Configuring Tailwind CSS

Creating the Post Component

Displaying the Post Component

Data fetching in Next.js — How To Use SWR

Sorry for the interrupt!

What is SWR?

Setting up

Fetching the data with useSWR

Creating the components

Paginating the data with useSWRInfinite

Routing in Next.js — A Complete Beginner's Guide

Sorry for the interrupt!

How Routing works in Next.js?

Linking between pages

Passing route parameters

Dynamic routes

Dynamic nested routes

Introduction Guide to Next.js

Sorry for the interrupt!

What is Next.js?

Creating a Next app

File structure

How To Use Redux in your React TypeScript App

Sorry for the interrupt!

Prerequisites

Setting up

Create the types

Create the action types

Create the action creators

Create a reducer

Create a store

Create the components

The React TypeScript Cheatsheet – How To Set Up Types on Hooks

Sorry for the interrupt!

Set types on useState

Set types on useRef

Set types on useContext

Set types on useReducer

Set types on useMemo

Set types on useCallback

How To Build a Todo App with React, TypeScript, NodeJS, and MongoDB

Sorry for the interrupt!

API with NodeJS, Express, MongoDB and TypeScript

Setting up

Create a Todo Type

Create a Todo Model

Create API controllers

Get, Add, Update and Delete Todos

Create API routes

Create a Server

Client-side with React and TypeScript

Setting up

Create a Todo Type

Fetch data from the API

Create the components

Add Todo Form

Display a Todo

Fetch and Display data

Resources

Advanced TypeScript Types cheat sheet (with examples)

Sorry for the interrupt!

Intersection Types

Union Types

Generic Types

Utility Types

Partial

Required

Readonly

Pick

Omit

Extract

Exclude

Record

NonNullable

Mapped types

Type Guards

Creating the `Post` Component

Displaying the `Post` Component

Fetching the data with `useSWR`

Paginating the data with `useSWRInfinite`