Hooks have been officially added to React as of React 16.8. One of the main benefits of Hooks in React is that you can use state and effect (which is generally a combination of different life cycles into one) in a component without creating a class.

In this tutorial, you’ll learn how to exactly use hooks in React. We will build a simple website that gives the user some options to pick from in order to generate some random number trivia.

You can check out the demo for the website here, and the source code on the GitHub repository.

Let’s…

What’s a better way to learn how to make a Chrome extension than making the web cuter with Pikachu images?

In this tutorial, I will show you how you can create a simple Chrome extension that replaces images on websites with Pikachu images. We will discuss topics like content scripts, background scripts, and messages between scripts in Chrome extensions.

The code for this tutorial is available here.

First thing you need to do when creating any chrome extension is start with creating a manifest.json file in the root of the extension’s directory. …

This article was originally published on my personal blog.

In this tutorial, we’ll cover how to take a screenshot in a Chrome extension and save it on the user’s machine. This tutorial requires some beginner skills in Javascript.

We’ll create an extension that allows the user to take a screenshot just by clicking the icon of the toolbar. The user can choose to take a screenshot of the entire screen, just a window, or the current tab.

Note that this extension will be using Manifest V3. I’ll provide some hints about the differences between V3 and V2 throughout the tutorial…

This article was originally published on my personal blog.

Please participate in this survey to voice your opinion as a developer for an upcoming article!

In the first part of this tutorial, we went over how to set up a MongoDB Realm app with sample data, generate the schema, create and restrict roles, and then integrated it with a React app, implementing an authentication system.

In this tutorial, we’ll go over how to ensure only logged-in users by email and password can add reviews, and we’ll test adding reviews by users that are not logged in to see MongoDB Realm…

This article was originally posted on my personal blog.

Understanding Magento 2 themes can be hard. The structure of the files, especially the less files can get confusing. One of the hard things to understand is how to style your emails.

In this tutorial, we’ll cover how we can easily style emails in Magento 2.

Prerequisites: Create a Theme

If you don’t already have a theme created, we’ll go over the steps quickly. If you have a theme you can skip this. Keep in mind we’re not actually going to explain everything about creating a theme here, as this can be long.

First, create…

This article was originally published on my personal blog.

In May 2021 Facebook’s rating keeps dropping reaching 1.7 stars on the App Store and 2.4 on the Google Play Store (at the time of writing this article). Facebook even requested from the App Store to remove the negative reviews, but Apple refused their request.

This is not the first time Facebook has been under heat, and most probably won’t be the last time. …

This article was originally posted on my personal blog.

MongoDB Realm is a serverless backend that allows you to not only write and read data easily but also provides easy ways to authenticate users, keep your data synchronized across multiple devices, and more.

In this tutorial, we’ll learn how to create a MongoDB Realm application, add sample data to it, restrict data access based on user roles, then how to integrate the application with React. We’ll create a website that shows restaurant reviews and allows users to create an account and add their own reviews.

You can find the code…

This article was originally published on my personal blog.

In this tutorial, we’ll go over how to search through each of Twitter, Instagram, Tumblr, and Pinterest. We’ll be setting up a server with express with a simple setup just to demonstrate the functionalities.

You can find the code for this tutorial in this GitHub repository.

Project Setup

Create a directory for the project then switch to it:

mkdir social-search 
cd social-search

Next, let’s initialize it with NPM:

npm init

You can enter any information that’s relevant for you, or just leave the default values.

Once done, we’ll install some initial packages we’ll…