Image for post
Image for post

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


Image for post
Image for post

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.


Image for post
Image for post

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


Image for post
Image for post

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


Image for post
Image for post

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


Image for post
Image for post
Photo by Pankaj Patel on Unsplash

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


Image for post
Image for post

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


Image for post
Image for post

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


Image for post
Image for post

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


Image for post
Image for post

You can also find this article on my personal blog.

Every beginner, whether to programming or to Open Source Projects, can agree that your first contribution is very scary. Not only do you not know how it works, but also you’re scared of what response you will get when you send that first PR.

A lot of projects on GitHub aim to make first-time contributors less scared of this. For example, the repository First Contributions aims to help you make that first contribution you are so scared of by making a simple change to the repository and guiding you in detail on how to submit the PR. …

About

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