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…


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

This article was originally posted on my personal blog.

If you use Ghost for your blogging needs and you need Grammarly as well to make your life easier, you probably noticed that Grammarly does not work with Ghost’s editor Koenig.

You can read more about it at these links:

The Solution

While looking through the above links, I saw different people saying that you can get Grammarly to work with Ghost’s editor by merely removing the attribute data-gramm="false". I tried doing that with my own blog and it worked!

It should…


Image for post
Image for post

This article was originally posted on my personal blog.

Social media share links are important for every website, and you can add them very easily! In this tutorial, we’ll go over how we can add a share link for each social media platform directly in our HTML.

Twitter

To add a share link to Twitter:

<a href="https://twitter.com/intent/tweet?text=Awesome%20Blog!&url=blog.shahednasser.com">Share on Twiter</a>

You can add the text parameter for the text you want in the tweet and the url parameter in case you want to add a URL to the tweet. You can test it here:

Share on Twiter

Make sure to encode the…


Image for post
Image for post

This article was originally posted on my personal blog.

CSS is a powerful tool that can do almost anything once you have had a full grasp of it. Sometimes we’re not aware of all the things you can do with CSS, and end up taking a complicated route to do what we need to be done. That’s why we need to always practice CSS and grow our skills in it and knowledge of it.

I decided to take on a challenge to use CSS to create famous logos we see every day. It was a challenge that helped me think…


Image for post
Image for post

This article was originally posted on my personal blog.

As you probably know, October is when Hacktoberfest happens. Every year in October, Developers all around the world participate in this event to participate in open source projects and receive good swag.

However, not everyone is able to help with big projects, and a lot of people resort to smaller and simple projects. Also, I wanted to create a project that would be helpful long after Hacktoberfest. That’s when I started my project Awesome Resources.

Purpose

The idea of this repository was simple. Participate in Hacktoberfest by adding any helpful resources you…


Image for post
Image for post

This was originally posted on my personal blog.

It’s important you keep your Javascript projects secure, especially with all the NPM packages you might be using, and their own dependencies that so many developers don’t look into.

A lot of times, your dependencies (or your dependencies’ dependencies) might have security issues in a certain version. A lot of times it gets fixed in the next version, but if you don’t act on updating your dependencies accordingly, then your project could be in danger to an attack of some kind (depending on the security issue).

It can be harder when it’s…


Image for post
Image for post

This article was originally posted on my personal blog.

In November 2020, Chrome introduced Manifest V3. For a long time, extensions have been using Manifest V2, so this is a big transition, especially with the new features in V3.

In this tutorial, we will see the steps needed to go from Manifest V2 to V3. I will be using the extension from a previous tutorial ( Chrome Extension Tutorial — Replace Images in Any Website with Pikachu) with a new branch. If you’re not familiar with it, we built a chrome extension that replaces all images in a website with…


Image for post
Image for post

This article was originally posted on my personal blog.

When creating any kind of project, there will be costs that you have to handle. Whether big or small, at some point it can be hindering or cause a hassle.

I will list for you different topics you might need in your projects and how you can get them for free.

Hosting

Finding a hosting is one of the most troublesome parts when you are creating a project, especially when you need it for free. …

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