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


This article was originally published on my personal blog.

Magento 2 is a great e-commerce platform, as it comes with many features built-in. It makes it easier for store owners to create a store that exactly fits their needs.

However, developing with Magento can be a pain, as it is not easy to learn, and even when you do, there is a lot of build or compilation required for a lot of minor changes, especially for front-end development.

Here’s where Grunt comes in. Grunt is a Javascript task runner that helps in automating repeated tasks like compilation, minification, etc…

We’ll…


This article was originally posted on my personal blog. Live examples will work better there.

When working on any project, you’ll need to use demo data to showcase the functionalities you’ve implemented.

So, I’ve compiled a list of websites, APIs, or resources, in general, you can use to get demo images and data easily.

Images

Lorem Picsum

Lorem Picsum allows you to easily get random images. You can specify the size, make them grayscale, make them blurred, and much more.

Here’s an example of using it:


If you’re working with PHP, maybe using Laravel or some other framework, in this tutorial, we’ll cover how to override classes using Composer.

This is helpful when you are using a library or package and want to override a certain functionality, but you can’t really edit the code directly.

Prerequisites

This tutorial assumes you already have a project that uses Composer, thus having a composer.jsonfile.

But First, What’s PSR-4

PSR stands for PHP Standard Recommendation. PSR-4 specifies standards for namespaces, class names, etc…

For example, let’s say you have the following file structure in your project:

- app
|
|_ _ _ Model
|…


In this tutorial, we’ll go over how to send notifications in Chrome Extensions. We’ll go over how to send one notification, and how to schedule notifications to be sent at a later time.

Prerequisites

This tutorial assumes you already know how to create a Chrome extension. If you don’t, then here is one you can start with first.

Setting Permissions

Before you can send any type of notification, you need to first add in yourmanifest.jsoninpermissionskey the following:

"permissions": [
"notifications"
//other permissions in your extension
]

This means that the user when installing or updating your extension has to accept that they will…


This article was originally published on my personal blog.

Ever since I started my blog, I keep getting questions from different people about how I stay motivated. The question can be related to work, programming, writing, or other topics.

It’s not an easy question, to be honest. Staying motivated can be related to different aspects of your life that can affect how you end up getting things done. With time, it can even end up being a skill you need to develop.

That’s why I decided to write an article answering the different questions regarding what motivates me in the…


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…

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