A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.

CSS variables are declared for a specific element as a custom property. Then, you can use that custom property anywhere you use that element.

Declaration and Usage

Here’s how you declare a custom property:

element {
--background-color: #f00;
}

Here, element can be a selector of any element, for example, div, p, .test, etc…

What we did is that we declared a custom property for this element called --background-color . …


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 was originally posted on my personal blog.

In this tutorial, we’ll go over how to create a simple custom React hook, testing it locally, and then publishing it on NPM. The React hook we’ll create isuseOnlinewhich detects if the user goes offline and shows them a message that they're offline.

After implementing it, we’ll check how we can test it locally, then publishing it on NPM.

If you’re checking out this tutorial to learn only how to create a custom hook to use it in an existing project without intending on publishing it as a package on NPM, then…


This article was originally published on my personal blog

Whenever you want to loop through an array in Javascript, the common approach taken is using theforloop. Although this is a valid choice, there are many other approaches that you can take to loop through an array in Javascript.

forEach

forEachallows you to loop through all items in an array. For example, a for loop like this:

for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

will become:

arr.forEach((item) => console.log(item));

This eliminates the need to keep using the index to access the item, especially when the items in…


This article was originally published on my personal blog.

Learning Git is very important for every developer. And for many beginners, it can be very confusing, as well.

In this article, I’ll go over the basic Git commands you’ll need to know as a beginner in a simple manner.

Cloning a Repository

This one is simple in itself. You just created a repository and you want to clone it on your machine. Just run:

git clone &lt;REPOSITORY_GIT_URL&gt;

Adding a Repository Into an Existing Project

Let’s say you already are working on a project and decided later on to create a repository for it. …


Stop Using Float in CSS - Here Are Your Alternatives

This article was originally published on my personal blog.

Throughout my years of working in CSS, the property that causes the biggest mess in the layout isfloat. Wheneverfloatis used, unexpected behavior occurs at some point in your layout and design. I've also seen a few beginners who stumbled upon issues like this. They use float then when problems arise, they find it hard to link it back to the floated element.

For this reason, I’m giving you a few options you can use to achieve the same effect you need withfloatwhile avoiding the mess. …


I Created a CLI to Cross-Post Your Articles On Dev, Hashnode, and Medium

This article was originally published on my personal blog.

If you own a blog like me, but also cross-post your articles on platforms like Dev, Hashnode, and Medium, it gets tedious to post your articles in different places.

So, I created a simple CLI to cross-post my articles on these platforms easily. You can find it on NPM and check the code on GitHub.

Installation

In your terminal:

npm i -g cross-post-blog

Usage

Set Configuration

For the simplicity of the CLI, and considering most of the APIs of each of the platforms do not allow or provide endpoints for user authentication, you will need…


This article was originally published on my personal blog.

Not long ago I wrote an article about tips for beginners to open source. It was to help some confusions beginners have when they contribute to open source projects. In this article, I will try to give out some tips for maintainers of open source projects.

I personally have been maintaining a couple of open source projects and I have learned a thing or two along the way, so I’m writing this in the hopes that it will help new or beginner maintainers. …


This article was originally published on my personal blog.

Developing extensions for different browsers is mostly similar, however, there are a few differences you should look out for.

This article lists the difference between developing Chrome extensions and Firefox Add-Ons, helping you understand how to make sure your extension is compatible with both browsers. In the end, I will also include the difference when packaging and publishing the extensions on the different platforms.

Manifest

Here are the key differences in the manifest.json file:

  1. Firefox has a developer key in the manifest, which is an object that includes name and url. …

Shahed Nasser

Full stack developer. http://shahednasser.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store