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


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…

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