React: “I agree to terms” checkbox example

September 21, 2020 Goodman

In this article, we’ll create a simple React project with a checkbox and a button: If the checkbox is unchecked, the button will be disabled and can not be clicked. If the checkbox is checked, the…

NPM: How To Show All Globally Installed Packages

September 21, 2020 Goodman

To show all globally installed npm packages on your computer, just run the following command: Here is my output: If you want to see all global packages and their dependencies, use this:

How to use Font Awesome 5 with Next.js

September 16, 2020 Ken Fisher

The example below shows you how to use Font Awesome 5 with Next.js. 1. Create a new Next.js project then install the required packages: 2. Edit the page/_app.js file (create one if it doesn’t exist): Note…

How to add Favicon to a Next.js app

September 16, 2020 Goodman

This article shows you how to add a favicon into a Next.js project through a few easy steps listed below. Step 1: Copy your favicon file (my one named favicon.ico) to the public folder located at…

How to determine mobile or desktop in React

July 6, 2020 Voldermort

An easy solution to determine whether your React app is rendering on a mobile device or a computer is to use a library called react-device-detect. Example Installation: The code: Check it out with Chrome developer tool:…

How to make a modal box from scratch in ReactJS

July 6, 2020 Ken Fisher

This article shows you how to code a modal box from scratch in ReactJS without any third-party libraries. Prerequisites: Basic ReactJS knowledge Basic CSS knowledge This is how our modal works: The Code Create a new…

ReactJS: Code an image portfolio gallery like Pinterest and Pixabay

June 23, 2020 Goodman

In this tutorial, we’ll create a beautiful, responsive image portfolio gallery like Pinterest and Pixabay. with an amazing library named react-masonry-component. Here’s what you will see at the end: Prerequisites To follow this tutorial, you will…

ReactJS: Get form input value with useState hook

June 22, 2020 Linda Walker

The simple example below shows you how to get the value from an input field in React. Example Create a brand new React app, delete everything in the App.js file, and add the code below: Try…

How to generate slugs from titles in Node.js

June 18, 2020 Linda Walker

A slug is the part of a URL that describes something about a webpage’s content. For example, we have a URL like this: Then the slug is: A slug often contains only some “friendly” characters in…

How to easily generate a random string in Node.js

June 18, 2020 Ken Fisher

This article introduces to you an easy way to generate random strings in Node.js using the randomBytes API provided by the crypto module (a built-in module and no installation required). The code: The output will look…

Reading content from PDF files using Node.js

June 10, 2020 Goodman

This tutorial will show you how to extract text from a PDF file using Node.js and a library named pdf-parse. No more boring talk, let’s dive right into the action The PDF file we’ll use for…

How to resize images using Node.js

June 10, 2020 Goodman

Resizing images in Node.js is super easy with a library named gm. To use this one, you need to install ImageMagick first. Here is the download page for Windows, Linux, and macOS. After installing ImageMagick, open…

Using Axios to Download Images in Node.js

June 10, 2020 Goodman

This article shows you how to download images from the internet by using Node.js and a third-party module called Axios. Installation The code: Now, execute your code and see what happens.

Crawling Facebook with Node.js and Puppeteer

June 9, 2020 Goodman

Puppeteer is a great library for Node.js which can help you crawl data from modern websites that using Javascript (React, Angular, Vue, jQuery Ajax…) to load and render content. In this tutorial, we’ll build a simple…

Understand React useContext hook through example

May 28, 2020 Goodman

The React Context API is useful for passing data (including number, object, function… ) deeply throughout a React app. It makes your life much easier than using multi-level props. The useContext hook is available in React…

Check computer RAM size with Node.js

May 28, 2020 Goodman

The built-in os module in Node provides methods that help you check your memory size. Note that 1 MB = 1024 KBs and 1KB = 1024 byte.

Get the number of CPU cores in Node.js

May 28, 2020 Goodman

Node has a built-in module called os that can help you find out how many cores your CPU has. Example:

Excluding node_modules when using tree command on Mac

May 28, 2020 Goodman

The node_modules folder is often super big and contains countless files and subdirectories. Therefore, when using the tree command to display your project structure, you should ignore node_modules. To do so, try this: The result: If…

3 great libraries to create pie charts in React (including examples)

April 30, 2020 Goodman

There are various libraries out there to help you create a beautiful pie chart (AKA circle chart, pie graph e.t.c) in React without any pain. victory-pie A very-easy-to-use chart drawing library. Example Install victory-pie by executing:…

Express: Automatically download an image when clicking a link

April 30, 2020 Goodman

The simple project below will show you how to automatically download an image served from Express server when clicking a link. Our project structure: The code in app.js (don’t forget to install express before running your…

1 2