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 first start by creating a react app. Since our website will be very simple, we will use the create-react-app command. If you don’t have it installed, you can install it using npm. …

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. …

You can also check this post on my personal blog here.

Chrome Devtools are packed with many tools that can help your testing, debugging, and development in general easier and faster. There are many features that developers are not familiar with or don’t use often. One of those features is Overrides.

What is Overrides

Overrides is a feature in devtools that helps you override any asset in a website and make changes to it, like Javascript or CSS files. You can override files that a website uses and see your changes in action on the website right away.

Why Use Overrides

When debugging websites, so many people make edits in the Sources panel in the Page panel to quickly test something. This can be helpful in some cases, however, those changes that you make are not permanent. Once you reload the page, the changes will be gone. So, if you are testing or debugging something throughout different pages or on load of a certain page, this method will not work. …

You can also check this post on my personal blog here.

Sometimes you want to create a simple blog or website and deploy it easily, at no cost. It may seem hard but it’s actually easy with Jekyll!

If you’re not familiar with Jekyll, it helps you create a simple and static website. You can just write your content in HTML or Markdown.

In this post, I will teach you how to create a blog with Jekyll in easy steps, and then deploy it on GitHub pages for free!

Installing Jekyll

To start with Jekyll, you first need to install some prerequisites on your system. You can find here on Jekyll’s website detailed guides on how you can do it based on your system. …

You can also check this post on my personal blog here.

Whether you’ve been working in Web Development forever or you’re just a beginner, so many styles that you have to implement using CSS can be a pain.

To make your life easier, I’ve compiled a list of generators that will make CSS a little more pleasant for you.

Animista

You can also check this post on my personal blog here.

It’s a big hassle for maintainers to set up and check every pull request that is created on their Repository, especially when the repository becomes popular or during Hacktoberfest.

Netlify helps you generate previews for every PR you receive on your Repository for free and the setup is very simple!

Create a Netlify Account

Head to Netlify to create an account. You can choose to Sign up with GitHub, GitLab, Bitbucket, or email. Choosing Sign up with GitHub is the fastest way, as you can directly give it access to your repositories.

Create a New Site

Once you create an account, you will be prompted to create a new site. You will first need to choose the Git Provider you are using. In our case, it’s GitHub. …

You can also check this post on my personal blog here.

Localization and Internationalization is a great way to get more users for your extension. Here is a simple tutorial that will help you do that.

This tutorial assumes you already know how to create a chrome extension. If not, you can head to my other tutorial to learn how to do that.

Step 1: Changing Manifest.json

When localizing your extension, you need to pick a default locale. This needs to be defined in the manifest.json file:

{
 ...
    "default_locale": "en",
    ...
}

You need to add a new key default_locale and the value should be the locale that your extension will default to. …

You can also find this article on my personal blog.

eCommerce websites are one of the most important websites and businesses these days. Picking the correct platform to use for your business or client’s business is very important. You need to pick what suits your products best, or if you have a lot of custom development that you will need to do, you need to pick the correct platform that won’t be a pain in the process.

Magento 2 and Prestashop are one of the most popular eCommerce frameworks. …